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

Question

我对 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 中，最初的 state 看起来像这样：

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

所有变量 ( this.covs.all_batches_tuples ) 都是相同的变量，并且在console.log中看起来不错，复选框被选中：

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

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

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

Answer 1

这个问题实际上是因为在调用axios之后更新了v-model 。 在这种情况下，您可以使用@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>