所有按钮只影响第一个按钮，而不影响它们本身

Question

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>

我有动态生成的按钮，但无论我单击哪个按钮，每次第一个按钮被“选中”或取消选中（取决于其先前的状态）。 我想独立切换它们。

<button  @click="toggleLike()" class="mr-2">
        <i id="but" class="fa-thumbs-up" :class="{ fas: isLiked, far: !isLiked }"></i>

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

Answer 1

您应该添加更多代码来说明如何构建生成的按钮，这是一个数组吗？如果是，那么您的 isLiked 应该是一个数组

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

编辑：只是提示您在 vue 中不需要 jquery

Answer 2

欢迎来到 SO，您实际上可以从 jquery 转移到 vue。您已经在 but 元素上进行了动态类绑定，因此您可以删除 method 上的 jquery 类处理。

模板：

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

注意。

我不确定你是如何动态生成按钮的，你能在你的问题上展示它吗？ （还不能评论）。您还应该展示如何处理 isLiked 数据的切换。