Javascript 所有按钮仅影响第一个按钮，而不影响其自身

card.vue是带有toggleLike方法和按钮标记的模板

<template>
  <div
    class="p-24 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-12"
  >
    <div
      v-for="movie in movies"
      :key="movie.imdbID"
    >
      <card :movieData="movie" />
    </div>
  </div>
</template>

---

欢迎使用SO，您实际上可以使用

vue

从

jquery

转移。您已经在

元素上创建了动态类绑定，但是

元素因此可以删除

方法上的
jquery
类处理

模板：

注意

我不知道如何动态生成按钮，你能在你的问题上显示它吗？（目前还不能发表评论）。您还应该展示如何处理
islike
数据的切换。
您应该在如何构造生成的按钮上添加更多代码，这是一个数组吗？如果是，那么您的islike应该是一个数组

<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,
    });
  }
}



方法：{
切换式（电影）{
movie.likes=movie.likes==0？1:0；
此.$store.dispatch（“updateMovieLikes”{
imdbID:this.movie.imdbID，
});
}
}

编辑：只是一个提示您在vue中不需要jquery
我需要它来显示按钮是否被单击，您指的是jquery吗？您可以在
toggleLike（）
方法中处理该问题。您可以编辑您的问题以显示更结构化的代码，这样我们可以更好地指导您。我相信按钮是使用v-for循环生成的，因为它们是名为card.vue的模板的一部分
 toggleLike() {
      if(this.movieData.likes == 0) {
          $('#but').removeClass('far');
        $('#but').addClass('fas');
                this.movieData.likes+1;
        }
        else {
          $('#but').removeClass('fas');
        $('#but').addClass('far');}
      return this.$store.dispatch("updateMovieLikes", {
        imdbID: this.movie.imdbID,
      });
    },

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

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,
  });
},

<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,
    });
  }
}