鍍金池/ 問答/HTML/ vue中如何根據(jù)實現(xiàn)v-for循環(huán)列表單條數(shù)據(jù)的收藏功能？

vue中如何根據(jù)實現(xiàn)v-for循環(huán)列表單條數(shù)據(jù)的收藏功能？

場景如圖：
圖片描述

現(xiàn)在是點一個其他的一塊跟著變，如何將索引index與樣式掛鉤，實現(xiàn)單獨的點擊收藏與取消？
代碼：

<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是實心。

回答
編輯回答
未命名

<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 的物品了！

2018年9月16日 04:19
編輯回答
離觴

在循環(huán)數(shù)組中新增一個屬性，例如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)

2018年4月18日 23:16
編輯回答
鹿惑

思路: 每個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}))
}

2018年1月6日 01:32
編輯回答
厭遇
toggle(key) {
    this.isA = key;
}
:class="{ '選中樣式' : key==this.isA}"

只需要添加選中樣式，默認就是不選中的

2018年2月1日 11:47