vue中如何根据实现v-for循环列表单条数据的收藏功能？

Question

场景如图：

现在是点一个其他的一块跟着变，如何将索引index与样式挂钩，实现单独的点击收藏与取消？
代码：

<div class="content_txt_1" v-for="(i,key) in storeAll">
    ···
    <a href="javascript:;" target="_self" class="weui-col-51" v-bind:class="{ 'weui-col-52' : !isA, 'weui-col-51': isA}" @click.stop="toggle(key)"></a>
    ···           
</div>

切换事件：

toggle(key) {
    this.isA = !this.isA;
}

---

weui-col-51是空心，weui-col-52是实心。

Answer 1

在循环数组中新增一个属性，例如isCollect，默认为false,
在模板中绑定样式

v-bind:class="item.isCollect ? 'weui-col-52':'weui-col-51'"

在点击事件中传递该项的索引index过去，获取原本的收藏值并取反，
let coll = !this.list[index].isCollect 然后更改this.$set(this.list[index],'isCollect',coll)

Answer 2

思路: 每个item对应一个是否收藏字段 ,然后操作的是item的这个字段.

:class="{ 'weui-col-52' : !item.isA, 'weui-col-51': item.isA}"

toggle(item,key) {
this.$set(this.storeAll,key,Object.assign({},item,{isA:!item.isA}))
}

Answer 3

toggle(key) {
    this.isA = key;
}

:class="{ '选中样式' : key==this.isA}"

只需要添加选中样式，默认就是不选中的

Answer 4

<div class="content_txt_1" v-for="(i,key) in storeAll">

<a href="javascript:;" target="_self" class="weui-col-51" v-bind:class="{ 'weui-col-52' : !isA, 'weui-col-51': isA}" @click.stop="toggle(key,id)"></a></div>

@click.stop="toggle(key,id)" 这里把你点击的物品id传过去，就会收藏对应id 的物品了！