Vue를 사용하여 API를 사용한 일괄 업데이트

Vue를 사용하여 API를 사용한 일괄 업데이트

여러 개의 레코드를 동시에 업데이트하려고 하는데, 이 레코드는 내 양식 데이터와 함께 전송되는 ID를 필요로 한다.나는 Vue.js를 사용하고 있고 내 Vuex 스토어의 데이터를 공리를 통해 보내고 있다.

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

이제 문제는 바로 여기서 세 번째 매개 변수를 전달하는 것이다.

updateCheckedEngagements(context, engagement, checkedEngagements)

나는 그것이 실제로 ID의 배열을 보내는 것인지 확신할 수 없다.신분증은 내가 작업할 때 양식으로부터 수집되고 있다는 것을 나는 알고 있다.console.log(this.checkedEngagements)하지만 vuex로 보낼때 뭔가 빠진것같은 느낌이 들어...어떤 도움이라도 대단히 고맙게 생각한다...

그래서 나는 이 해결책에 도달했다.

...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"나는 사용했다.v-model="checkedEngagements.engagements"

참조URL: https://stackoverflow.com/questions/52954704/batch-update-with-api-using-vue