在 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

1             if (this.flag) {
2               this.flag = false;
3               this.num++
4             } else {
5               this.flag = true;
6               this.num--
7             }

然后 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) => {
                  // 更新赞
                })
)}
}
}

成品图: