[Vuejs]-VueJs Like and Dislike buttons with Vfor

by

0👍

✅

That’s because you’re using comments.counter instead of comment.counter (the comment at the current index in the array comments).

Change your markup to look like this:


<div class="container">
    <div class="comment--like--dislike--app">
        <div v-for="(comment, index) in comments" :key="index" class="card mb-10 comment--item">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
                deserunt, tempore accusamus iusto nobis dolore ratione itaque
                perferendis delectus? Nostrum corporis, quod voluptates quis
                consequuntur eveniet beatae dolor aperiam ad.
            </p>
            <div class="action--button--container text-right mt-10">
                <button v-on:click="increment(index)" v-bind:id="comment.id" class="btn-sm btn-success">
                    Like ({{comment.counter}})
                </button>
                <button v-on:click="increment(index)" v-bind:id="comment.id" class="btn-sm btn-danger">
                    Dislike ({{comment.counter}})
                </button>
            </div>
        </div>
    </div>
</div>

Additionally, as ashwin bande pointed out in the comments, you have a logic issue as well. You are using increment(index) for both your like and dislike buttons.

I believe what you’re trying to accomplish is this:

const app = Vue.createApp({
  data() {
    return {
      comments: [{
          id: 1,
          counter: {
            likes: 0,
            dislikes: 0
          }
        },
        {
          id: 2,
          counter: {
            likes: 0,
            dislikes: 0
          }
        },
      ],
    };
  },
  methods: {
    increment(index) {
      this.comments[index].counter.likes++;
    },
    decrement(index) {
      this.comments[index].counter.dislikes++;
    },
  },
}).mount(".container");
<script src="https://unpkg.com/vue@next"></script>

<div class="container">
  <div class="comment--like--dislike--app">
    <div
      v-for="(comment, index) in comments"
      :key="index"
      class="card mb-10 comment--item"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint 
        deserunt, tempore accusamus iusto nobis dolore ratione itaque 
        perferendis delectus? Nostrum corporis, quod voluptates quis 
        consequuntur eveniet beatae dolor aperiam ad.
      </p>
      <div class="action--button--container text-right mt-10">
        <button
          @click="increment(index)" 
          :id="comment.id"
          class="btn-sm btn-success"
        >
          Like ({{comment.counter.likes}})
        </button>
        
        <button
          @click="decrement(index)"
          :id="comment.id"
          class="btn-sm btn-danger"
        >
          Dislike ({{comment.counter.dislikes}})
        </button>
      </div>
    </div>
  </div>
</div>

Leave a comment