使用 Vue 使用 API 批量更新答案

【问题标题】：Batch Update With API Using Vue使用 Vue 使用 API 批量更新
【发布时间】：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 以更加明确。我将在下面发布我的答案。

标签： laravel vue.js axios vuex

【解决方案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"

【讨论】：