在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ vue中v-for循環(huán)出的list下的item 如何操作使被點(diǎn)擊的元素隱藏

vue中v-for循環(huán)出的list下的item 如何操作使被點(diǎn)擊的元素隱藏

我用v-for循環(huán)出來(lái)的收藏列表,想點(diǎn)擊某一條收藏列表的紅心區(qū)域,這條收藏列表就會(huì)隱藏移除。但是我每次點(diǎn)擊其中一條,循環(huán)出來(lái)的列表就全部被隱藏了,代碼如下:
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}}年 | 評(píng)價(jià){{temp.score}}</span>
            </div>
            <div class="body_body_right">
                <img class="body_body_right_img" src="../../assets/MyFavorite/xysc@2x.png" @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";
    }
  });
},
        
        
回答
編輯回答
萌面人

vue是雙向綁定的呀,你把temp數(shù)組里面被點(diǎn)擊的那個(gè)元素刪掉,列表就自動(dòng)刪除你刪掉的那個(gè)元素

removeFav(data) {
  let vm = this;
  //vm.favShow = false; 這個(gè)變量和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";
    }
  });
},
2018年8月23日 18:26
編輯回答
憶當(dāng)年

沒(méi)有想就寫(xiě)代碼了吧, v-show="favShow" 你綁定到所有的項(xiàng)上去了??!

修改后代碼

        <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;
  //...
},
2018年2月4日 13:17