为什么 Axios 发布错误的数据？答案

【问题标题】：Why is Axios posting the wrong data?为什么 Axios 发布错误的数据？
【发布时间】：2020-10-07 15:07:05
【问题描述】：

我对 Axios 感到困惑：

在我的 Vue 模板中，我有一个 JS 对象列表，每个元素都是这样的：

covs.all_batches_tuples[
...
{'id': 45, 'bname': 'tcp_S1153', 'selected': False}
...
]

我有一个复选框循环：

<v-row>
   <v-col v-for="batch in covs.all_batches_tuples" :key="batch.id" class="pa-0 ma-0 text-body-2" cols="1">
      <input type="checkbox" :id="batch.id" v-model="batch.selected" :value="batch.bname"
  @click="selected_batches()"/>
      <label :for="batch.id">{{ batch.bname }}</label>
   </v-col>
</v-row>

最后我有一个方法可以在单击复选框后触发：

methods: {
    selected_batches() {
      console.log("1 ", this.covs.all_batches_tuples)
      axios({
        method: 'post',
        url: 'http://192.168.21.152:8002/showAnns/covs/',
        data: {
          checked_batches_ids_string: this.covs.all_batches_tuples,
        },
      })
      console.log("2 ", this.covs.all_batches_tuples)
    },
}

在 Chrome 中，初始状态如下所示：

当我点击一个复选框时，selected_batches 方法会触发两个 console.log() 函数和 axios 函数。

所有变量（this.covs.all_batches_tuples）都是相同的变量，console.log 看起来不错，复选框被选中：

但在 axios 中将其发布为未选中：

如果我再次单击此复选框，使其“未选中”，则 axios 将其显示为“已选中”：

这里发生了什么？感谢您的帮助！

【问题讨论】：

标签： javascript vue.js vuejs2 axios

【解决方案1】：

这个问题实际上是因为v-model在axios被调用之后更新。在这种情况下，您可以使用@change 而不是@input。

<v-row>
  <v-col v-for="batch in covs.all_batches_tuples" :key="batch.id" class="pa-0 ma-0 text-body-2" cols="1">
    <input type="checkbox" :id="batch.id" v-model="batch.selected" :value="batch.bname" @change="selected_batches" />
    <label :for="batch.id">{{ batch.bname }}</label>
  </v-col>
</v-row>

【讨论】：