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（{path：'whatever route'}）

它也没有改变

如果可以的话，我需要父组件EngagementsList正确响应从AddEngagement组件网提交的新添加的订婚。.

Answer 1

尽管我看不到您的代码，但可以肯定我知道问题所在。您有一个数组，但是它对其中的对象没有反应。这是因为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)

Answer 2

这是Vuex中addEngagement的代码

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 3

所以我尝试了不同的配置。我更改了状态描述，即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将我的clientengagements数组突变为新添加的参与中的单个对象。

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

正在致力于这种突变

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

后请求Vue上的数据反应性

3 个答案: