[Vuejs]-All buttons effect only the first button, but not themselves

by

0👍

Welcome to SO, You could actually shift-away from jquery with vue. You already made a dynamic class binding on your but element therefore you can remove the jquery class handling on your method.

template:

<button @click="toggleLike()" class="mr-2">
        <i class="fa-thumbs-up" :class="isLiked ? 'fas' : 'far'"></i>
</button>

method:

toggleLike() {
  // Add here how you handle the toggling of isLiked data
  
  if (this.movieData.likes === 0) this.movieData.likes++;
  
  return this.$store.dispatch("updateMovieLikes", {
    imdbID: this.movie.imdbID,
  });
},

Note.

I’m not sure how you generate the buttons dynamically, can you show it on your question? (can’t comment yet). You should also show how do you handle the toggling of your isLiked data.

0👍

You should put more code on how you structure your generated buttons, is that an array? If it is then your isLiked should be an array

<div v-for="movie in movies">
  <button  @click="toggleLike(movie)" class="mr-2">
    <i id="but" class="fa-thumbs-up" :class="movie.likes === 0 ? 'fas' : 'far'"></i>
  </button>
</div>


methods: {
  toggleLike(movie) {
    movie.likes = movie.likes === 0 ? 1 : 0;

    this.$store.dispatch("updateMovieLikes", {
      imdbID: this.movie.imdbID,
    });
  }
}

Edit: Just a tip you dont need jquery in vue

Leave a comment