vue中v-for循环出的list下的item 如何操作使被点击的元素隐藏

Question

我用v-for循环出来的收藏列表，想点击某一条收藏列表的红心区域，这条收藏列表就会隐藏移除。但是我每次点击其中一条，循环出来的列表就全部被隐藏了，代码如下：
html部分：

        <div class="body_body" v-show="favShow" v-for="(temp, index) in temp" :key="index">
            <div class="body_body_left" @click="chooseThis(temp.coachId)">
                <img class="body_body_left_img" :src=temp.avatar>
            </div>
            <div class="body_body_center" @click="chooseThis(temp.coachId)">
                <span class="body_body_center_text1">{{temp.name}}({{temp.schoolName}})</span>
                <span class="body_body_center_text2">驾龄{{temp.experience}}年 | 评价{{temp.score}}</span>
            </div>
            <div class="body_body_right">
                <img class="body_body_right_img" src="../../assets/MyFavorite/[e-mail]" @click="removeFav(index)">
            </div>
        </div>
        

javascript部分：

removeFav(data) {
  let vm = this;
  vm.favShow = false;
  for (const v of vm.temp) {
    if (data == vm.temp.indexOf(v)) {
      vm.id = v.id;
    }
    console.log(vm.id);
  }
  removeFavorite(vm.id).then(response => {
    const data = response.data;
    if ((data.code = constants.status_success)) {
      vm.showToast = true;
      vm.toastTitle = "取消收藏成功!";
      vm.toastType = "text";
      vm.toastWidth = "200px";
    } else {
      vm.showToast = true;
      vm.toastTitle = data.message;
      vm.toastType = "text";
      vm.toastWidth = "200px";
    }
  });
},
        
        

Answer 1

没有想就写代码了吧， v-show="favShow" 你绑定到所有的项上去了！！

修改后代码

        <div class="body_body" v-show="!favHide[index]" v-for="(temp, index) in temp" :key="index">
        ....

data(){
    return {
     favHide:{}
    }
}
//...
removeFav(index) {
  this.favHide[index] = true;
  //...
},

Answer 2

vue是双向绑定的呀，你把temp数组里面被点击的那个元素删掉，列表就自动删除你删掉的那个元素

removeFav(data) {
  let vm = this;
  //vm.favShow = false; 这个变量和html的v-show可以不要了
  vim.temp.splice(data, 1); //删除指定index的元素
  removeFavorite(vm.id).then(response => {
    const data = response.data;
    if ((data.code = constants.status_success)) {
      //vm.showToast = true;
      vm.toastTitle = "取消收藏成功!";
      vm.toastType = "text";
      vm.toastWidth = "200px";
    } else {
      //vm.showToast = true;
      vm.toastTitle = data.message;
      vm.toastType = "text";
      vm.toastWidth = "200px";
    }
  });
},