首頁猿問 vue中如何根據(jù)實現(xiàn)v-for循環(huán)...

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

JavaScript

陪伴而非守候 2019-03-06 17:15:21

場景如圖：現(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是實心。

查看完整描述

4 回答

守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗獲得超4個贊

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

反對回復(fù) 2019-03-16

白板的微信

TA貢獻(xiàn)1883條經(jīng)驗獲得超3個贊

思路: 每個item對應(yīng)一個是否收藏字段 ,然后操作的是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}))
}

反對回復(fù) 2019-03-16

RISEBY

TA貢獻(xiàn)1856條經(jīng)驗獲得超5個贊

<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傳過去，就會收藏對應(yīng)id 的物品了！

反對回復(fù) 2019-03-16