vue中如何将对象推入数组

Question

我正在尝试将新创建的对象推送到数组。数组定义为

clientengagements: []

对象是

engagement: []

所以我使用 v-for 来遍历我的 clientengagements 数组中属于客户的每个参与。 在我提交新的约定之前一切正常。它将我的 clientengagements: [] 数组更改为仅显示新对象。现在，如果我刷新页面，clientengagements: [] 将返回到数组，其中包含新添加的对象以及已经存在的其他对象，这就是我想要它做的事情..

这是我用来分派到商店的 AddEngagement 组件脚本

methods: {
    ...mapActions(['addEngagement']),

    addNewEngagement() {
      if(!this.engagement.return_type || !this.engagement.year ) return;

      this.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,
      })   
      .then(() => {
        this.engagement = "" 
        this.idForEngagement++
        this.$router.go(-1);
      })
    },
  },

商店中的动作定义如下

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)
      })
    },

从那里它应该提交 getClientEngagements() 突变，我相信这是我遇到的问题，但我还没有想出如何解决。这是代码

getClientEngagements(state, clientengagements) {
      state.clientengagements = clientengagements;
    },

有人建议我使用 Vue.set() 但我不知道如何应用它。任何帮助将不胜感激！！！

Answer 1

.then(response => {
    ...// data transaction 
    context.commit('getClientEngagements', response.data)
})

也许您可以先处理响应数据，然后再将其存储。

如果响应数据是一个对象，而你只想存储值， 你可以做类似的事情：

for( p in object ){
    context.commit('getClientEngagements', object[p])
}

如果响应数据是一个数组，那么你可以尝试使用for获取你想要的值，然后在状态下push。 您应该首先根据您的需要为您的案例进行数据交易。

Answer 2

感谢所有帮助，但实际上我最终需要添加一个额外的突变并将其用作提交，因为我定义了单独的参与列表。一份给客户，一份给所有客户。这是新的突变

addClientEngagement(state, engagement) {
      state.clientengagements.push(engagement)
    },

然后我在这里的操作中使用它

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('addClientEngagement', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

然后发生这种突变

getClientEngagements(state, clientengagements) {
      state.clientengagements = clientengagements
    },

以前它使用这种突变将参与度添加到数组中，这就是它用新对象替换数组的原因。旧突变见下文

addEngagement(state, engagement) {
      state.engagements.push ({
        id: engagement.id,
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
    },

希望我的解释是有意义的

Answer 3

所以我已经将突变 getClientEngagements 设置为现在使用它

getClientEngagements(state, engagement) {
      state.clientengagements.push(engagement)
    },

但是通过将突变更改为 this ，它会将已经存在的对象放入更深的嵌套数组中。见下文

因此，新参与的 response.data 仅从后端发回 addEngagement 操作中新添加的参与。这是个问题吗？