前两天一个新来的同事问了我一个前端，关于 收藏和取消收藏的 功能的

当时给了他2个方法：

1）子组件完成收藏功能，收藏完成后调用父组件刷新列表

2）收藏后，修改参数对象属性，来实现按钮的显隐

为了简单，后面我采用第二种，这里贴下代码

代码如下

1. 按钮定义

<el-button v-if="item.collectStatus === '1'" @click.stop="cancelCollect(item)" >
	取消收藏
</el-button>

<el-button v-else @click.stop="collect(item)" >
	收藏
</el-button>

2. 收藏方法

// 收藏
collect(data) {
	this.$api.bizApi.xxx.collecting({
	  id: data.id
	}).then((res) => {
	  if (res.code === 1) {
		this.$message({type: 'success', message: "收藏成功"})
		this.$set(data, 'collectStatus', '1')
	  }
	}).catch(() => {})
},

// 取消收藏
cancelCollect(data) {
	this.$api.bizApi.xxx.cancleCollecting({
	  id: data.id
	}).then((res) => {
	  if (res.code === 1) {
		this.$message({type: 'success', message: "取消收藏成功"})
		this.$set(data, 'collectStatus', '0')
	  }
	}).catch(() => {})
}