Реакционная способность данных по запросу Post Vue

Question

У меня проблемы с моими данными, которые не реагируют правильно, когда новый объект добавляется в массив данных.В настоящее время я зацикливаюсь на массиве обязательств, которые принадлежат клиенту, как этот

<div class="row mx-2 px-2 justify-content-between" v-if="!engagementLoaded">
            <div class="card mb-3 shadow-sm col-lg-5 col-md-3 p-0" v-for="(engagement, index) in engagement" :key="index">
                <div class="d-flex justify-content-between card-header">
                    <h3 class="m-0 text-muted">{{ index + 1 }}</h3>
                    <h5 class="align-self-center m-0"><span>Return Type: </span> {{ engagement.return_type }} </h5>
                </div>
                <div class="card-body text-left p-0 my-1">
                    <h5 class="p-4"><span>Year: </span> {{ engagement.year }} </h5>
                    <hr class="my-1">
                    <h5 class="p-4"><span>Assigned To: </span> {{ engagement.assigned_to }} </h5>
                    <hr class="my-1">
                    <h5 class="p-4"><span>Status: </span> {{ engagement.status}} </h5>
                </div>
                <div class="card-footer d-flex justify-content-between">
                    <router-link to="#" class="btn">View</router-link>
                    <router-link to="#" class="btn">Edit</router-link>
                </div>
            </div>
        </div>

Все работает нормально, пока я не добавлю новое обязательство в массив.Мой компонент AddEngagement является отдельным, но это форма и скрипт для него.

<form @submit.prevent="addEngagement" class="d-flex-column justify-content-center">
          <div class="form-group">
            <select class="form-control mb-3" id="type" v-model="engagement.return_type">
              <option v-for="type in types" :key="type.id" :value="type">{{ type }}</option>
            </select>
            <input type="text" class="form-control mb-3" placeholder="Year" v-model="engagement.year">
            <input type="text" class="form-control mb-3" placeholder="Assign To" v-model="engagement.assigned_to">
            <input type="text" class="form-control mb-3" placeholder="Status" v-model="engagement.status">

            <div class="d-flex justify-content-between">
              <button type="submit" class="btn btn-primary d-flex justify-content-start">Create</button>
              <router-link v-bind:to="'/client/' +client.id+ '/engagements'" class="btn btn-secondary float-right">Dismiss</router-link>
            </div>
          </div>
        </form>

Это метод addEngagement для формы

methods: {
    addEngagement(e) {
      if(!this.engagement.return_type || !this.engagement.year ){
        return
      } else {
        this.$store.dispatch('addEngagement', {
          id: this.idForEngagement,
          client_id: this.client.id,
          return_type: this.engagement.return_type,
          year: this.engagement.year,
          assigned_to: this.engagement.assigned_to,
          status: this.engagement.status,
        })
        e.preventDefault();
      }
      e.preventDefault();
      this.engagement = "" 
      this.idForEngagement++
      this.$router.go(-1);
    },
  },

Я думаю, что проблема здесь происходит, но яне уверен

this.$router.go(-1);

Я тоже пробовал это

this. $ router.push ({путь: 'любой маршрут'})

и он тоже не изменился

Каким-то образом мне нужно, чтобы родительский компонент EngagementsList корректно реагировал на мое недавно добавленное мероприятие, отправленное из компонента AddEngagement, если это имеет смысл ..

Answer 1

вот код для addEngagement в Vuex

addEngagement(context, engagement) {
      axios.post(('/engagements'), {
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagement', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

Answer 2

Итак, я пробовал разные конфигурации этого.Я изменил свое описание состояния, что v-for выполняет итерацию к клиентскому кредиту

, теперь он равняется клиентскому кредиту

, здесь есть мутация

getClientEngagements(state, engagement, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },

, которая не работает.Я также пытался

getClientEngagements(state, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },

Что скажет мне, что «помолвка» не определена

Если кто-то еще может помочь, это Действие

addEngagement(context, engagement) {
      axios.post(('/engagements'), {
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagements', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

response.data мутирует мой массив клиентских правок только на один объект недавно добавленной помолвки.

context.commit('getClientEngagements`, response.data)

Передает эту мутацию

getClientEngagements(state, engagement, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },

Answer 3

Хотя я не вижу ваш код, я почти уверен, что знаю проблему.У вас есть массив, но он не реагирует на объекты внутри.Это потому, что Vue не знает, как наблюдать этот массив.

Если вы хотите, чтобы ваш массив был реактивным, используйте Vue.set изнутри вашего store model.

Vue.set(this/state, 'array_name', Array<Of objects>)

.убедитесь, что vue следит за изменениями в массиве.

В вашем случае вам нужно добавить объект взаимодействия в существующий массив, а затем использовать этот массив:

const engagements = state.engagements

engagements.push(engagement)

Vue.set(state, 'engagements', engagements)