У меня проблема в моем проекте. Проект похож на 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: [],
action.js - я получаю массив из базы данных
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)
})
}
Если есть какой-либо другой способ обновить массив или что-то не так с моим кодом, я хотел бы это услышать. Заранее спасибо.
Хорошо, благодаря @tony19, я только что понял, что отправляю обратно решение, за которое проголосовали, а не весь массив.
Разрыв, который я вижу, заключается в том, что ваша мутация обновляет
state.solutionsOfProblem
, но вычисляемая опора вашего компонента используетstate.solutions.solutionsOfProblem
(обратите внимание на объектsolutions
). Предполагая, что это не опечатка, как они связаны в вашем коде? Также, пожалуйста, покажите значениеres.data.data
.