Массив Vue.js исчезает после его обновления в мутации

У меня проблема в моем проекте. Проект похож на 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)
    })
}

Если есть какой-либо другой способ обновить массив или что-то не так с моим кодом, я хотел бы это услышать. Заранее спасибо.

Разрыв, который я вижу, заключается в том, что ваша мутация обновляет state.solutionsOfProblem, но вычисляемая опора вашего компонента использует state.solutions.solutionsOfProblem (обратите внимание на объект solutions). Предполагая, что это не опечатка, как они связаны в вашем коде? Также, пожалуйста, покажите значение res.data.data.

tony19 26.12.2020 23:27
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
1
1
246
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, благодаря @tony19, я только что понял, что отправляю обратно решение, за которое проголосовали, а не весь массив.

Другие вопросы по теме