vue框架下不知道怎么实现点击收藏后收藏人数自动加1,望赐教?

image.png
如上图,点击收藏后,收藏成功了,但是收藏人数不会自动加1,望不吝赐教,不胜感激。


  
    





    
      
      
      

{{question_title}}

{{question_content}}

{{question_updated_time}}

收藏 {{question_collection_num}} 写回答

{{item.u_name}}



{{item.answer_content}}

{{item.updated_time}}

{{item.praise_num}}  {{item.criticize_num}} 评论
export default { name:"detailPage", inject:['reload'], data(){ return{ question_title:this.$route.params.question_title,//问题标题 question_content:this.$route.params.question_content,//问题内容 question_id: this.$route.params.question_id,//路由传值 question_state:this.$route.params.question_state,//问题状态 question_updated_time:this.$route.params.question_updated_time,//问题更新时间 question_collection_num: this.$route.params.question_collection_num,//收藏问题的人数 answerList:[], answerId:'', replyList:[], a_id:3, reply:'',//回复内容 searchItem:'',//搜索的内容 id:this.$route.params.id,//从登陆界面进行传值 img:this.$route.params.img, token:this.$route.params.token, count:'', ifToken:localStorage.getItem('access_token'), u_name:'', question_user_id: this.$route.params.question_user_id } }, mounted() { var _this = this; console.log("传过来的question_title:"+this.$route.params.question_title) console.log("从mainPage页面传过来的question_updated_time:"+this.$route.params.question_updated_time) _this.$axios.post('/api/user/selectByUserId', _this.$qs.stringify({ uId:_this.id, }), {headers:{access_token:_this.token}} ).then(function (response) { console.log("主页获取登录用户信息:"); console.log(response.data); console.log(response.data.data.u_img); console.log(response.data.data.u_name); _this.img = response.data.data.u_img; _this.u_name=response.data.data.u_name; }).catch(function (error) { console.log(error); //_this.$message.error('请求失败'); }) _this.$axios.post('/api/answer/showAnswerByTime', _this.$qs.stringify({ questionId:_this.question_id, }),{headers:{access_token:_this.token}} ).then(function (response) { console.log("showAnswerByTime请求成功"); console.log(response.data); console.log(response.data.data) if(response.data.code === -1) _this.$message.info('该问题还没有回答'); else _this.answerList = response.data.data; }).catch(function (error) { console.log(error); alert("请求失败"); }) _this.$axios.post('/api/msg/showMsgNum', _this.$qs.stringify({ userId: _this.$route.params.id,//router传值!!! }),{headers:{access_token:_this.token}} ).then(function (response) { console.log(response.data.data); _this.count = response.data.data; //_this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('获取消息失败'); }) },//end getQuestion函数,得到问题的详细信息 methods:{ collect(){ var _this=this; console.log("所收藏的问题id为:"+this.question_id) console.log("所收藏的问题的提出者为:"+this.question_user_id) _this.$axios.post('/api/quest/alterQuestCollectionState', _this.$qs.stringify({ questionId:_this.question_id, uId:_this.question_user_id, //提出该问题的人 operatorId:_this.id, isDeleted:3 }),{headers:{access_token:_this.token}} ).then(function(response){ console.log("response.data.data:"); console.log(response.data) if(response.data.code === 0){ _this.$message.success('收藏成功'); console.log("收藏人数:"+_this.question_collection_num) } else _this.$message.info(response.data); _this.reload(); }).catch(function(error){ console.log(error); _this.$message.error('请求失败'); }) }, logout(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end exit函数/* onClick ({ key }) { console.log(`Click on item ${key}`) }, exit(){ var _this = this; _this.$router.push({ path:'/mainPage', name:'mainPage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) }, write(){ var _this = this; _this.$router.push({ path:'/writeAnswer', name:'writeAnswer',//路由命名 params:{ question_id:_this.question_id,//页面之间的传值 id:_this.id, img:_this.img, token:_this.token, question_title:_this.question_title, question_content:_this.question_content, question_state:_this.question_state, }, }); },//end write函数,写回答 like(record){ var _this = this; //console.log(record); _this.$axios.post('/api/answer/alterAnswerEvaluationState', _this.$qs.stringify({ answerId: record.answer_id,//回答编号 uId: record.user_id,//用户账号 operatorId: _this.id,//操作者账号?????需要进行修改 evaluationState: 4,//回答被赞 }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response); if(response.data.code === 90) _this.$message.error('不能进行重复操作'); else if(response.data.code === 90000) _this.$message.error('请先登录再对该回答进行操作'); else _this.$message.success('点赞成功'); }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); })//end catch异常 },//end like函数,赞回答 dislike(record){ var _this = this; _this.$axios.post('/api/answer/alterAnswerEvaluationState', _this.$qs.stringify({ answerId: record.answer_id,//回答编号 uId: record.user_id,//用户账号 operatorId: _this.id,//操作者账号?????需要进行修改 evaluationState: 5,//回答被赞 }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data); if(response.data.code === 90) _this.$message.error('不能进行重复操作'); else if(response.data.code === 90000) _this.$message.error('请先登录再对该回答进行操作'); else _this.$message.success('点踩成功'); }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); })//end catch异常 },//end dislike函数。踩回答 showReplyByTime(answer_id){ var _this = this; _this.$axios.post( '/api/showReplyByTime', _this.$qs.stringify({ answer_id: answer_id, }) ).then(function (response) { console.log(response.data); _this.replyList = response.data.data(); }).catch(function (error) { console.log(error); _this.$notification.error({ message: '请求失败', // description: '', }); }) },//end showReplyByTime函数,按照时间顺序展示回复 info(record) { var _this = this; _this.$router.push({ path: '/getComments', name: 'getComments',//路由命名 params: { question_title:_this.question_title, answer_content:record.answer_content, answer_id:record.answer_id, id:_this.id, img:_this.img, token:_this.token, question_id:_this.question_id, question_state:_this.question_state, question_content: _this.question_content, }, }) },//end info函数,提供弹窗功能 addReply(formName){ var _this = this; _this.$axios.post('/api/addAnswer', _this.$qs.stringify({ answerId: _this.answerId, userId:2,//使用router replyContent:_this.reply, }) ).then(function (response) { console.log("请求成功"); console.log(response.data); _this.$message.success('成功提交评论'); _this.$router.push({ path:'/detailpage', name:'DetailPage',//路由命名 params:{ id:_this.id, }, }); }).catch(function (error){ console.log(error); console.log(formName.text); _this.$message.error('请求失败,请重新提交评论'); }) },//end addReply函数,添加回复 onSearch(){ var _this = this; _this.$axios.post('/api/quest/selectByTitle', _this.$qs.stringify({ questionTitle:_this.searchItem, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data.data); _this.$router.push({ path:'/searchPage', name:'searchPage',//路由命名 params:{ list:response.data.data, id:_this.id, img:_this.img, token:_this.token }, });//end 页面跳转 }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end onSearch函数,进行查找问题 getMessage(){ var _this = this; _this.$router.push({ path:'/messagePage', name:'messagePage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) },//end getMessage函数,获取消息 }//end methods }

{{question_title}}

{{question_content}}

{{question_updated_time}}

收藏 {{question_collection_num}} 写回答

{{item.u_name}}



{{item.answer_content}}

{{item.updated_time}}

{{item.praise_num}}  {{item.criticize_num}} 评论
export default { name:"detailPage", inject:['reload'], data(){ return{ question_title:this.$route.params.question_title,//问题标题 question_content:this.$route.params.question_content,//问题内容 question_id: this.$route.params.question_id,//路由传值 question_state:this.$route.params.question_state,//问题状态 question_updated_time:this.$route.params.question_updated_time,//问题更新时间 question_collection_num: this.$route.params.question_collection_num,//收藏问题的人数 answerList:[], answerId:'', replyList:[], a_id:3, reply:'',//回复内容 searchItem:'',//搜索的内容 id:this.$route.params.id,//从登陆界面进行传值 img:this.$route.params.img, token:this.$route.params.token, count:'', ifToken:localStorage.getItem('access_token'), u_name:'', question_user_id: this.$route.params.question_user_id } }, mounted() { var _this = this; console.log("传过来的question_title:"+this.$route.params.question_title) console.log("从mainPage页面传过来的question_updated_time:"+this.$route.params.question_updated_time) _this.$axios.post('/api/user/selectByUserId', _this.$qs.stringify({ uId:_this.id, }), {headers:{access_token:_this.token}} ).then(function (response) { console.log("主页获取登录用户信息:"); console.log(response.data); console.log(response.data.data.u_img); console.log(response.data.data.u_name); _this.img = response.data.data.u_img; _this.u_name=response.data.data.u_name; }).catch(function (error) { console.log(error); //_this.$message.error('请求失败'); }) _this.$axios.post('/api/answer/showAnswerByTime', _this.$qs.stringify({ questionId:_this.question_id, }),{headers:{access_token:_this.token}} ).then(function (response) { console.log("showAnswerByTime请求成功"); console.log(response.data); console.log(response.data.data) if(response.data.code === -1) _this.$message.info('该问题还没有回答'); else _this.answerList = response.data.data; }).catch(function (error) { console.log(error); alert("请求失败"); }) _this.$axios.post('/api/msg/showMsgNum', _this.$qs.stringify({ userId: _this.$route.params.id,//router传值!!! }),{headers:{access_token:_this.token}} ).then(function (response) { console.log(response.data.data); _this.count = response.data.data; //_this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('获取消息失败'); }) },//end getQuestion函数,得到问题的详细信息 methods:{ collect(){ var _this=this; console.log("所收藏的问题id为:"+this.question_id) console.log("所收藏的问题的提出者为:"+this.question_user_id) _this.$axios.post('/api/quest/alterQuestCollectionState', _this.$qs.stringify({ questionId:_this.question_id, uId:_this.question_user_id, //提出该问题的人 operatorId:_this.id, isDeleted:3 }),{headers:{access_token:_this.token}} ).then(function(response){ console.log("response.data.data:"); console.log(response.data) if(response.data.code === 0){ _this.$message.success('收藏成功'); console.log("收藏人数:"+_this.question_collection_num) } else _this.$message.info(response.data); _this.reload(); }).catch(function(error){ console.log(error); _this.$message.error('请求失败'); }) }, logout(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end exit函数/* onClick ({ key }) { console.log(`Click on item ${key}`) }, exit(){ var _this = this; _this.$router.push({ path:'/mainPage', name:'mainPage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) }, write(){ var _this = this; _this.$router.push({ path:'/writeAnswer', name:'writeAnswer',//路由命名 params:{ question_id:_this.question_id,//页面之间的传值 id:_this.id, img:_this.img, token:_this.token, question_title:_this.question_title, question_content:_this.question_content, question_state:_this.question_state, }, }); },//end write函数,写回答 like(record){ var _this = this; //console.log(record); _this.$axios.post('/api/answer/alterAnswerEvaluationState', _this.$qs.stringify({ answerId: record.answer_id,//回答编号 uId: record.user_id,//用户账号 operatorId: _this.id,//操作者账号?????需要进行修改 evaluationState: 4,//回答被赞 }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response); if(response.data.code === 90) _this.$message.error('不能进行重复操作'); else if(response.data.code === 90000) _this.$message.error('请先登录再对该回答进行操作'); else _this.$message.success('点赞成功'); }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); })//end catch异常 },//end like函数,赞回答 dislike(record){ var _this = this; _this.$axios.post('/api/answer/alterAnswerEvaluationState', _this.$qs.stringify({ answerId: record.answer_id,//回答编号 uId: record.user_id,//用户账号 operatorId: _this.id,//操作者账号?????需要进行修改 evaluationState: 5,//回答被赞 }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data); if(response.data.code === 90) _this.$message.error('不能进行重复操作'); else if(response.data.code === 90000) _this.$message.error('请先登录再对该回答进行操作'); else _this.$message.success('点踩成功'); }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); })//end catch异常 },//end dislike函数。踩回答 showReplyByTime(answer_id){ var _this = this; _this.$axios.post( '/api/showReplyByTime', _this.$qs.stringify({ answer_id: answer_id, }) ).then(function (response) { console.log(response.data); _this.replyList = response.data.data(); }).catch(function (error) { console.log(error); _this.$notification.error({ message: '请求失败', // description: '', }); }) },//end showReplyByTime函数,按照时间顺序展示回复 info(record) { var _this = this; _this.$router.push({ path: '/getComments', name: 'getComments',//路由命名 params: { question_title:_this.question_title, answer_content:record.answer_content, answer_id:record.answer_id, id:_this.id, img:_this.img, token:_this.token, question_id:_this.question_id, question_state:_this.question_state, question_content: _this.question_content, }, }) },//end info函数,提供弹窗功能 addReply(formName){ var _this = this; _this.$axios.post('/api/addAnswer', _this.$qs.stringify({ answerId: _this.answerId, userId:2,//使用router replyContent:_this.reply, }) ).then(function (response) { console.log("请求成功"); console.log(response.data); _this.$message.success('成功提交评论'); _this.$router.push({ path:'/detailpage', name:'DetailPage',//路由命名 params:{ id:_this.id, }, }); }).catch(function (error){ console.log(error); console.log(formName.text); _this.$message.error('请求失败,请重新提交评论'); }) },//end addReply函数,添加回复 onSearch(){ var _this = this; _this.$axios.post('/api/quest/selectByTitle', _this.$qs.stringify({ questionTitle:_this.searchItem, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data.data); _this.$router.push({ path:'/searchPage', name:'searchPage',//路由命名 params:{ list:response.data.data, id:_this.id, img:_this.img, token:_this.token }, });//end 页面跳转 }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end onSearch函数,进行查找问题 getMessage(){ var _this = this; _this.$router.push({ path:'/messagePage', name:'messagePage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) },//end getMessage函数,获取消息 }//end methods }

此为问题的详细信息界面,下为问题列表界面


  
    
    
      
      
      
已终结
未终结
{{item.question_title}}

{{item.question_content}}

收藏  {{item.collection_num}} 回答  {{item.answer_num}} 回答  {{item.answer_num}}
export default { name:"mainPage", inject:['reload'], data(){ return{ u_name:' ', searchItem:'', count:'', list:[], id:this.$route.params.id,//从登陆界面进行传值 img:'', token:this.$route.params.token, record: '', ifToken: localStorage.getItem('access_token'), } }, mounted() { var _this = this; console.log("从login界面传过来的id为:"+this.$route.params.id); console.log("从login界面传过来的token为:"+_this.token); _this.$axios.post('/api/quest/showQuestByTime', {}, { headers: { access_token: _this.token } } ).then(function (response) { console.log("showQuestByTime:") console.log(response.data); _this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) //var _this = this; _this.$axios.post('/api/user/selectByUserId', _this.$qs.stringify({ uId:_this.id, }), {headers:{access_token:_this.token}} ).then(function (response) { console.log("主页获取登录用户信息:"); console.log(response.data); console.log(response.data.data.u_img); console.log(response.data.data.u_name); _this.img = response.data.data.u_img; _this.u_name=response.data.data.u_name; }).catch(function (error) { console.log(error); //_this.$message.error('请求失败'); }) _this.$axios.post('/api/msg/showMsgNum', _this.$qs.stringify({ userId: _this.$route.params.id,//router传值!!! }),{headers:{access_token:_this.token}} ).then(function (response) { console.log(response.data.data); /*console.log("回答数量:"+response.data.data.answer_num);*/ _this.count = response.data.data; //_this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('获取消息失败'); }) },//end mounted自动执行函数 methods:{ collect(record){ var _this=this; console.log("所收藏的问题id为:"+record.question_id) console.log("所收藏的问题的提出者为:"+record.user_id) _this.$axios.post('/api/quest/alterQuestCollectionState', _this.$qs.stringify({ questionId:record.question_id, uId:record.user_id, //提出该问题的人 operatorId:_this.id, isDeleted:3 }),{headers:{access_token:_this.token}} ).then(function(response){ console.log("response:"+response); if(response.data.code === 0){ _this.$message.success('收藏成功'); _this.list = response.data.data; } else if(response.data.code === 90000) _this.$message.error('请先登录再收藏'); else _this.$message.info(response.data); _this.reload(); }).catch(function(error){ console.log(error); _this.$message.error('请求失败'); }) }, write(record){ var _this = this; console.log(record);//打印问题详细信息 _this.$router.push({ path:'/writeAnswer', name:'writeAnswer',//路由命名 params:{ question_id:record.question_id,//页面之间的传值 id:_this.id, img:_this.img, token:_this.token, question_title:record.question_title, question_content:record.question_content, question_state:record.question_authority_state, }, }); },//end write函数,写回答 logout(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end exit函数/* onClick ({ key }) { console.log(`Click on item ${key}`) }, seeThisQuestion(record){ var _this = this; console.log("record:");//打印问题详细信息 console.log(record) console.log("问题的提出者为:"+record.user_id) _this.$router.push({ path:'/detailPage', name:'detailPage',//路由命名 params:{ question_id:record.question_id,//页面之间的传值 id:_this.id, img:_this.img, token:_this.token, question_state:record.question_authority_state, question_title:record.question_title, question_content:record.question_title, question_updated_time:record.updated_time, question_collection_num:record.collection_num, question_user_id:record.user_id }, }); },//end seeThisQuestion函数,查看这个问题的详细信息 onSearch(){ var _this = this; _this.$axios.post('/api/quest/selectByTitle', _this.$qs.stringify({ questionTitle:_this.searchItem, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data); _this.$router.push({ path:'/searchPage', name:'searchPage',//路由命名 params:{ list:response.data.data, id:_this.id, img:_this.img, token:_this.token }, });//end 页面跳转 }).catch(function (error) { console.log(error); _this.$message.error('请求失败'); }) },//end onSearch函数,进行查找问题 getMessage(){ var _this = this; _this.$router.push({ path:'/messagePage', name:'messagePage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) },//end getMessage函数,获取消息 }//end methods } @import "../assets/mainPage.css";

麻烦了!

最佳答案

添加 _this.question_collection_num+=1

collect(){
      var _this=this;
      console.log("所收藏的问题id为:"+this.question_id)
      console.log("所收藏的问题的提出者为:"+this.question_user_id)
      _this.$axios.post('/api/quest/alterQuestCollectionState',
          _this.$qs.stringify({
            questionId:_this.question_id,
            uId:_this.question_user_id, //提出该问题的人
            operatorId:_this.id,
            isDeleted:3
          }),{headers:{access_token:_this.token}}
      ).then(function(response){
        console.log("response.data.data:");
        console.log(response.data)
        if(response.data.code === 0){
          _this.$message.success('收藏成功');
          console.log("收藏人数:"+_this.question_collection_num)
          _this.question_collection_num+=1
        }
        else
          _this.$message.info(response.data);
        
        _this.reload();
      }).catch(function(error){
        console.log(error);
        _this.$message.error('请求失败');
      })
    }