通過 v-for 循環的列表，點擊一項只對這一項產生相應的操作

在 vue 項目中，通過 v-for 循環出的買家秀中，點贊功能，點擊一項只對這一項有作用

首先，在組件中，兩個點贊圖標，這里使用阿里巴巴矢量圖標庫， v-if 和 v-else 顯示其中一個。如下代碼

            <p class="zan">
              <i class="icon iconfont icon-weibiaoti--" v-if="item.flag" @click="dianZan(i)"></i>
              <i class="icon iconfont icon-weibiaoti--" style="color: crimson" v-else @click="dianZan(i)"></i>
              <span>{{ item.zanNum }}</span>
            </p>

數據庫中，存放着點贊的數量及標識符flag， “flag”：true ，默認未點贊

剛開始錯誤做法：

數據庫中沒有flag標識符和zanNum，只在data中定義flag：true，num:0

            if (this.flag) {
              this.flag = false;
              this.num++
            } else {
              this.flag = true;
              this.num--
            }

然后 localStorage.setItem('weiWeiTaoZanNum',this.num) 存放進本地瀏覽器中，在進入頁面時，在生命周期函數created中調用 this.num = localStorage.getItem('weiWeiTaoZanNum'); 

這種做法的確可以實現點贊和圖標變化，但是點其中一項，其余全部會變

正確做法：

數據庫中存放flag標識符，點擊事件中將 索引傳遞過來，然后some遍歷數據數組，找到相同索引那一項，判斷是否點過贊， array[i].flag = true 時，表示還未點贊，為 false 時，已經點過贊，且點贊圖標已經變為紅色，在點一次就要取消贊，flag變為 true ，接着將改變后的對象傳給后台，更新數據庫中的數據。

代碼如下：

      methods:{
        dainZan(i){ // i 表示當前點擊的那一項
          // console.log(i)
          this.List.some((value, index, array) => {
            // console.log(index)
            // console.log(array)
            if (i === index) {
              if (array[i].flag) {
                array[i].zan++;
                array[i].flag = false
              } else {
                array[i].zan--;
                array[i].flag = true
              }
              // console.log(array[i])
              const zanObj = array[i];
                this.$axios.post('/updatezan',zanObj).then((res) => {
                  // 更新贊
                })
）}
}
}

成品圖：