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

因此，我将变异getClientEngagements设置为立即使用

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

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

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

Answer 2

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

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

如果响应数据是一个对象，而您只想存储该值，您可以执行以下操作：

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

如果响应数据是一个数组，则可以尝试使用for来获取所需的值，然后将其推入状态。首先，应根据您的情况进行数据事务处理。

Answer 3

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

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

希望我的解释很有意义

如何在Vue中将对象推入数组

3 个答案: