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

Question

我正在尝试open在一个项目列表中切换一个类v-repeat.我只想要一个列表项(最近点击的一个)来拥有该类open.

输出的数据具有"class"属性,默认情况下为空字符串.我正在使用它来设置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在数据中设置属性本身感觉很hacky(但我会满足于任何有效的修复).

Answer 1

我刚遇到同样的问题.我还在学习Vue,但是我使用"v-class"指令解决了它.使用v-class,只要记录的活动值为true,它就会自动将类"open"添加到list元素.希望这个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);
        }
    }
});