问题描述
我的项目有问题。该项目就像stackoverflow。问题/答案。当我点击向上或向下按钮说这个解决方案有用与否时,它会发送到后端以增加并发送回更新后的所有解决方案。目前一切正常。但是在我更新了突变的解决方案后,解决方案消失了,但它更新了数组。它适用于问题部分。 v-for 不用于问题部分。我认为 v-for 和 v-if 可能会导致问题。好的,这里是代码:
HTML
<b-card
no-body
v-for="(solution,index) in solutionsOfProblem"
:key="index"
>
<div v-if="solutionsOfProblem.length > 0">
<b-card-body id="problem-detail-body">
<div id="problem-detail-body-top">
<div id="problem-detail-body-top-left">
<button
@click="upSolution(solution._id)"
id="up-down-buttons"
>
<b-icon-exclamation-circle-fill
id="up-icon"
variant="danger"
class="h2 mb-2"
></b-icon-exclamation-circle-fill>
...
...
script.js
computed: {
user() {
return this.$store.state.user.user;
},solutionToSend() {
return this.$store.state.solutions.solutionToSend;
},solutionsOfProblem() { // this shows the array of solutions
return this.$store.state.solutions.solutionsOfProblem
},methods: {
upSolution(solution) { // this one trigger the action to make a post request to database
if (this.user.name) {
this.VoteSolution.solutionId = solution
this.VoteSolution.isUpped = true
this.$store.dispatch('solutions/VoteSolutionFromDatabase',this.VoteSolution)
} else {
this.$bvToast.toast('You need to login to Vote!',{
title: 'Error',autoHideDelay: 4000,variant: 'danger'
})
}
},}
突变
const solutionVoted = (state,solution) => {
state.solutionsOfProblem = solution
}
状态
solutionsOfProblem: [],
const VoteSolutionFromDatabase = ({ commit },Vote) => {
axios({
method: 'post',url: 'http://localhost:3000/api/solution/Votesolution',data: Vote,withCredentials: true,headers: {
Accept: "application/json",},})
.then((res) => {
commit('solutionVoted',res.data.data)
})
.catch((err) => {
commit('VotedSolutionError',err.response)
})
}
如果有任何其他方法可以更新数组或我的代码有问题,我想听听。提前致谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)