在Vue.js中，更改数据数组中所有项目的特定属性的值

Tom Hazledine 发表于 Dev

汤姆·哈兹莱丁

我正在尝试open在中的项目列表上切换类v-repeat。我只希望一个列表项（最近单击的一项）具有该类open。

输出的数据具有“类别”属性，默认情况下为空白字符串。我正在使用它来设置列表项的类，v-repeat如下所示：

<li v-repeat="dataSet"
    v-on="click: toggleFunction(this)"
    class="{{ class }}">
    {{ itemContent }}
</li>

我v-on="click: toggleFunction(this)"在每个项目上使用，这使我可以更改特定项目的类，但是如何更改所有其他项目的类？

我当前的点击方法：

toggleFunction: function(item) {
    if (item.class == '') {
        // code to remove the `open` class from all other items should go here.
        item.class = 'open';
    } else {
        item.class = '';
    }
}

我试过使用常规的jQuery函数剥离类：确实删除了类，但不会更改item.class属性，因此，一旦多次单击某项，事情就会变得很奇怪。

我敢肯定，必须有一种简单的方法来解决我所没有看到的问题，而且必须class在数据本身中设置一个属性无论如何都会让人感到不舒服（但是我会为所有可行的解决方案感到满意）。

mcallan83

我只是遇到了同样的问题。我仍在学习Vue，但我使用“ v-class”指令解决了它。使用v-class，只要记录的有效值为true，就会自动将“ open”类添加到列表元素。希望这个JSFiddle帮助。

<ul>
    <li 
        v-repeat="people"
        v-on="click: toggleActive(this)"
        v-class="open: active">{{ name }}
    </li>
</ul>




new Vue({
    el: '#app',
    data: {
        people: [
            {name: 'mike'},
            {name: 'joe',active: true},
            {name: 'tom'},
            {name: 'mary'}
        ]
    },
    methods: {
        toggleActive: function(person) {
            // remove active from all people
            this.people.forEach(function(person){
                person.$set('active',false);
            });
          //set active to clicked person
            person.$set('active',true);
        }
    }
});