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

我对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>

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

单击复选框时，

selected\u batches

方法将触发两个console.log（）函数和axios函数

所有变量（

this.covs.All\u batches\u tuples

）都是相同的变量，并且在

控制台中.log

看起来不错，选中了复选框：

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

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

---

这是怎么回事？谢谢你的帮助

这个问题实际上是因为

v-model

在调用

axios

之后更新。在这种情况下，您可以使用

@change

而不是

@input

{{batch.bname}

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