Пакетное обновление с API с использованием Vue - PullRequest
Новая
       8

Пакетное обновление с API с использованием Vue

0 голосов
/ 23 октября 2018

Я пытаюсь обновить несколько записей одновременно, что требует от меня отправки массива идентификаторов с данными формы.Я использую Vue.js и отправляю данные из моего хранилища vuex через axios.

Данные отправляются из моего компонента vue следующим образом: 

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

this.checkedEngagements собираетмассив идентификаторов я буду обновлять.Тем не менее, поскольку я использую 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)
      })           
    },

Теперь проблема заключается в передаче 3-го параметра в методе прямо здесь: 

updateCheckedEngagements(context, engagement, checkedEngagements)

Я не уверен, что он действительно отправляетмассив идентификаторов.Я знаю, что идентификаторы собираются из формы, когда я делаю console.log(this.checkedEngagements).однако, я чувствую, что что-то упускаю, когда отправляю это в vuex ... любая помощь будет принята с благодарностью ...

1 Ответ

0 голосов
/ 24 октября 2018

Итак, я пришел к этому решению. 

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

У меня возникла проблема при попытке собрать массив идентификаторов и использовать тот же объект для отправки данныхс.Это было потому, что я не был достаточно явным с моим именованием.Когда я вкладываю массив 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" я использовал v-model="checkedEngagements.engagements"

...