[Vuejs]-How to change color for v-for elements with Firestore data

by

0👍

✅

<template>
  ...
  ...
  <div :class="bindLike">
    <v-icon @click="posts(post.id)">mdi-heart</v-icon>
    <span> {{ post.likes }} </span>
  </div>
</template>

<script>
export default {
  computed: {
    bindLike: function() {
      return post.likes > 0 ? 'liked' : 'notliked';
    }
  },
}
</script>

<style>
.liked { background: blue; }
.notliked { background: transparent; }
</style>

this may work for you..!
But, ideal would be create a new component PostLikes and pass mode, count as props.

Leave a comment