vue 实现收藏和取消收藏功能,方法体修改参数对象属性 this.$set

avatar 2022年12月16日11:05:15 0 158 views
博主分享免费Java教学视频,B站账号:Java刘哥

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

当时给了他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(() => {})
}

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0