菜鸟记---vue实现选中取消功能

先上效果图

vue里循环出来的列表 点击选中一条看详情页 其中有一个方法是通过index去判断 事件绑定

<div @click='IconShow(index)'></div>
<div v-if="index == editIcon"></div>
复制代码

定义data数据

data(){
    return{
        editIcon:-1, 
    }
}
复制代码

定义方法

methods:{
    editIconShow(hoverIndex){
        this.editIcon = hoverIndex;
    },
}
复制代码

这样就可以选中了 ,网上的方法很多,接下来是类似于围观的效果.点击围观--点击取消围观--个个list里面的围观互补影响,一开始我也是按照上面的思路来做的,然后发现有点问题,

最后也是解决了,但是方法阔能略显得笨拙了. 上代码

<span  @click="qa_onlook(index)" :class="looked_list[index] == true?'qa_onlookActive':''">围观</span>
data () {
    return {
        qa_onlookActive:-1,
        looked_list:[],
    }
 },
 methods:{
    //请求数据复制
     getData(){
      let url = 'http://lalala';
      let _this = this;
      axios.get(url, {})
        .then(response => {  
            response.data.rt.list.forEach(function(item,index){
                _this.looked_list[index] = item.looked;
            });         
            _this.qa_list = response.data.rt.list;
        }, err => {
            console.log(err+'err');
        })
        .catch((error) => {
             console.log(error+'error')
        })
      }
      //事件触发
      qa_onlook(index){      
          let onlooked = !this.looked_list[index];
          this.$set(this.looked_list, index, onlooked);//方法一
        //   this.looked_list.splice(index,1,onlooked);//方法二
        //Vue.set(this.aas,3,this.aas[3])//方法三
      },
 }
复制代码

我是定义一个数组去保存状态, true或者false 去判断是否围观过, 点击的时候去改变这个状态, 但是遇到一个很严肃的问题, vue数据绑定数组，改变元素时不更新view问题 这个问题的解决在下面的链接

1.原理在官方文档cn.vuejs.org/v2/guide/li…

2.我的参考文档blog.csdn.net/wxl1555/art…

转载于:https://juejin.im/post/5b7d27bcf265da43494db952