我正在使用vuejs v-for循环列出项目。我有一些来自服务器的API数据。
items: [
{
foo: 'something',
number: 60
},
{
foo: 'anything',
number: 15
},
{
foo: 'text',
number: 20,
}
]
模板
<div v-for="(item,index) in items" :key="index">
<div :class="{ active: ????}" @click="toggleActive">
{{ item.foo }}
{{ item.number }}
</div>
</div>
JS
methods: {
toggleActive() {
//
}
}
我需要执行以下操作:当我单击div时,将活动类添加为活动类,如果我已经有活动类-删除活动类。(toggle)。我也可以选择多个项目。
我该怎么做?我在items数组中没有布尔变量,我也不应该在单独的组件中移动项目
答案 0 :(得分:2)
你在这里。
new Vue({
el: "#app",
data: {
items: [{
foo: 'something',
number: 60
},
{
foo: 'anything',
number: 15
},
{
foo: 'text',
number: 20,
}
]
},
methods: {
toggleActive(index) {
let item = this.items[index];
item.active = !item.active;
this.$set(this.items, index, item);
}
}
})
.active {
color: red;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div v-for="(item,index) in items" :key="index">
<div :class="{ active: item.active}" @click="toggleActive(index)">
{{ item.foo }} {{ item.number }}
</div>
</div>
</div>
这是一个JS小提琴: https://jsfiddle.net/eywraw8t/250008/
答案 1 :(得分:1)
App.vue
<template>
<div>
<div
v-for="(item, i ) in items"
:key="i"
:class="{ active: i === activeItem}"
>
// some looped items from data here
// button for active toggle
<button @click="selectItem(i)"> make item active </button>
</div>
</div>
</template>
数据和方法
<script>
export default {
data() {
return {
activeItem: null,
};
},
methods: {
selectItem(i) {
this.activeItem = i;
},
},
};
</script>