使用 Vue 使用 API 批量更新

Posted 2023-02-22

【中文标题】使用 Vue 使用 API 批量更新

【英文标题】：Batch Update With API Using Vue

【发布时间】：2019-03-28 00:36:38

【问题描述】：

我正在尝试同时更新多条记录，这需要我将一组 id 与我的表单数据一起发送。我正在使用 Vue.js 并通过 axios 从我的 vuex 商店发送数据。

数据是从我的 vue 组件发送的，如下所示：

methods: 
    ...mapActions(['updateCheckedEngagements']),
    updateChecked() 
      this.updateCheckedEngagements(
        engagements: this.checkedEngagements,
        assigned_to: this.engagement.assigned_to,
        status: this.engagement.status
      ) 
    ,

this.checkedEngagements 正在收集我将要更新的 id 数组。但是，由于我使用 vuex 来实际发送数据，所以我正在执行以下操作，这不是我以前需要做的事情，所以我试图弄清楚这是否是正确的方法。这是我的vuex商店中的方法

updateCheckedEngagements(context, engagement, checkedEngagements) 
      axios.patch('/engagementsarray', 
        engagements: checkedEngagements,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
      )
      .then(response => 
          context.commit('updateCheckedEngagements', response.data)
      )
      .catch(error => 
          console.log(error.response.data)
      )           
    ,

现在的问题是在这里传递方法中的第三个参数：

updateCheckedEngagements(context, engagement, checkedEngagements)

我不确定它实际上是在发送 id 数组。我确实知道当我执行console.log(this.checkedEngagements) 时，正在从表单中收集 ID。但是，当我将它发送到 vuex 时，我感觉好像遗漏了一些东西......任何帮助将不胜感激......

【问题讨论】：

Vuex 动作和突变只接受两个参数。如果要传递多个参数，则需要传递一个对象作为第二个参数，其中每个属性都是您要传递的参数之一。

是的，如果我将 checkedEngagements: [] 放在 engagement 对象内，但是当我这样做时，我正在捕获 Id 数组的 v-model 没有填充，这似乎是一个单独的问题关于嵌套数组..反之亦然，如果我在使用该操作时未定义“checkedEngagements”，它将返回警报checkedEngagements未定义...

我整理了一个小例子以确保我理解。我在那里留下了一些 cmets 描述我认为它应该如何工作。 codepen.io/Kradek/pen/WaYbdY?editors=1010

@Bert，感谢您抽出宝贵时间，但是我将updateCheckedEngagements(context, engagement, checkedEngagements) 更改为updateCheckedEngagements(context, checkedEngagements)，并更新了我的v-model 以更加明确。我将在下面发布我的答案。

【参考方案1】：

所以我想到了这个解决方案。

...mapActions(['updateCheckedEngagements']),
    updateChecked() 
      this.updateCheckedEngagements(
        engagements: this.checkedEngagements.engagements,
        assigned_to: this.checkedEngagements.assigned_to,
        status: this.checkedEngagements.status
      ) 
    ,

我的店是这样的

updateCheckedEngagements(context, checkedEnagements)   
      axios.patch('/engagementsarray', 
        engagements: checkedEnagements.engagements,
        assigned_to: checkedEnagements.assigned_to,
        status: checkedEnagements.status
      )
      .then(response => 
          console.log(response)
          context.commit('updateCheckedEngagements', response.data)
      )
      .catch(error => 
          console.log(error.response.data)
      )           
    ,

我在尝试收集 id 数组并使用相同的对象发送数据时遇到问题。这是因为我的命名不够明确。当我将checkedEngagements:[] 数组嵌套在我的engagement 对象中时，它将引用v-for 我正在循环而不是对象。要了解我在说什么，我将发布 v-for 循环

<tbody>
              <tr v-for="(engagement, index) in engagementFilter" :key="index">
                <th scope="row"><input type="checkbox" :value="engagement.id" v-model="checkedEngagements.engagements"></th>
                <th> engagement.client.last_name,  engagement.client.first_name &  engagement.client.spouse_first_name</th>
                <td> engagement.status </td>
                <td> engagement.assigned_to </td>
                <td> engagement.return_type </td>
                <td> engagement.year </td>
              </tr>
            </tbody>

所以因为v-for 使用的是engagement，所以我不能在我的v-model 中也使用engagement。我没有使用v-model="enagagement.checkedEngagements"，而是使用v-model="checkedEngagements.engagements"