Question

我试图同时更新多个记录，这需要我将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时，我感觉好像缺少了一些东西。任何帮助将不胜感激...

Answer 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，因此我在engagement中也无法使用v-model。我没有使用v-model="enagagement.checkedEngagements"

使用Vue使用API批量更新

1 个答案:

使用Vue使用API​​批量更新

1 个答案:

使用Vue使用API批量更新