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

Question

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

输出的数据有一个"class"属性，默认为空字符串。我正在使用它来设置 v-repeat 中列表项的 class，如下所示：

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

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

我目前的点击方式：

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 函数去除 classes：确实删除了 classes 但它不会更改 item.class 属性，所以一旦某个项目被多次点击，事情就会变得很奇怪...

我确信一定有一种直接的方法来解决这个我没有看到的问题，而且必须在数据本身中设置一个 class 属性无论如何都感觉很麻烦（但我会满足于任何有效的修复）。

Answer 1

我刚运行遇到了同样的问题。我仍在学习 Vue，但我使用 "v-class" 指令解决了它。使用 v-class，只要记录的活动值为真，它就会自动将 class "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);
        }
    }
});

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

In Vue.js, change value of specific attribute for all items in a data array

javascript

vue.js