描述
点击“取消收藏“,图标切换,文字变为“收藏“,收藏状态变为”未收藏“,刷新页面”未收藏“数据不再显示
思路
通过if判断,给定这条数据一个状态,点击改变状态值(状态需要后端在接口里返回)
- 未点击时,图标亮,状态为true
- 点击时,图标灰,数据从列表消失改变为false
template
<div
class="star_on_off"
@click="cancelCollection(item, index)"
style="cursor: pointer"
>
<img src="@/assets/star.png" v-if="!item.state" />
<img src="@/assets/star_active.png" v-else />
<p v-if="!item.state">未收藏</p>
<p v-else>收藏</p>
</div>
data
stateData: {}, //收藏状态
methods
给后端返回状态和id
/***
* 取消收藏
*/
async cancle(item, index) {
console.log(item, "111");
// cancleFavorite收藏接口
let res = await cancleFavorite({
id: item.baikeId,
remove: item.state,
});
if (res.code == "200") {
// console.log(res)
this.onSearch();
} else {
this.onSearch();
this.$message.warning(res.msg);
}
},
// 收藏/取消收藏操作
cancelCollection(item, index) {
// console.log(item, "9");
this.stateData.loginUserFavorite = !this.stateData.loginUserFavorite;
this.cancle(item, index);
},
列表刷新
在created里调查询事件(获取列表信息)
created() {
this.onSearch();
},