vue.js - Vue2.0 为何在v-for列表中绑定的class不会改变?

问题描述

问 题

如题，我写了一个组件，如下：

var list = Vue.component("list-menu",{
    template:`
        <div class="list-menu">
            <div v-text='name' class = 'name'></div>
            <ul>
                <li @click="click(item)" v-for="item in items" :class="{active:item.isActive}">
                    <div class="" v-text="item.name"></div>
                </li>
            </ul>
        </div>    
    `,
    props:{
        "data":{
            "required":true
        },
        'name':{
            "required":true
        }
    },
    methods:{
        click(v){
            this.$parent.$emit("select",v.name);
      this.items.forEach(i=>{
          i.isActive = false;
      })
      v.isActive = true;
      console.log(this.items)
        }
    },
    computed:{
        items(){
            var list = [];
            this.data.forEach(i=> {
                list.push({
                    name:i,
                    isActive:false
                });
            });
            return list;            
        }
    }
})

fiddle链接

在点击列表之后，组件中的属性值确实改变了，但是dom上没有变化。
怎么办？

解决方案

原因：直接修改computed中items值，dom检测不到items的变化视图不会更新，详情请参考官方API，computed一节，更改代码如下：

var list = Vue.component("list-menu",{
    template:`
        <div class="list-menu">
            <div v-text='name' class = 'name'></div>
            <ul>
                <li @click="click(item)" v-for="item in items" :class="{active:item.isActive}">
                    <div class="" v-text="item.name"></div>
                </li>
            </ul>
        </div>    
    `,
    props:{
        "data":{
            "required":true
        },
        'name':{
            "required":true
        }
    },
  data(){
      return{items:[]}
  },
  mounted(){
  this.getItems();
  },
    methods:{
        click(v){
            this.$parent.$emit("select",v.name);
      this.items.forEach(i=>{
          i.isActive = false;
      })
      v.isActive = true;
        },
    getItems(){
      var list = [];
            this.data.forEach(i=> {
                list.push({
                    name:i,
                    isActive:false
                });
            });
      this.items = list;
    }
    }
})

这篇关于vue.js - Vue2.0 为何在v-for列表中绑定的class不会改变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！