Vue中如何监听动态checkbox的checked值并通过axios提交到API

错误原因 #

你原来的写法无法运行的核心原因是：element是v-for循环内部的局部变量，不属于Vue实例的根级响应式属性，watch配置里的监听键必须是Vue实例上可直接访问的属性，所以直接写element.checked作为监听键会找不到目标属性报错。

最优实现方案（推荐） #

不需要用watch，直接给checkbox绑定change事件，触发时直接传递当前循环的element对象即可，逻辑更清晰、性能更高：

1. 先修正模板的两个问题：原来的checkbox id是固定值会导致所有label都指向第一个复选框，同时新增change事件绑定：

<li v-for="element in checklist" :key="element.id" class="block w-full p-1">
  <div v-if="element.taskId == task" class="w-full border-2 rounded-md p-4">
    <div class="float-right">
      <button @click="deleteCheck(element.id)">
        <Trash2Icon class="px-1"/>
      </button>
    </div>
    <div class="flex">
      <!-- 动态id避免label冲突，新增change事件 -->
      <input 
        type="checkbox" 
        :id="`checkbox-${element.id}`" 
        v-model="element.checked" 
        class="w-6"
        @change="handleCheckUpdate(element)"
      >
      <label :for="`checkbox-${element.id}`" class="px-2">{{element.content}}</label>
    </div>
  </div>
</li>

2. 在methods中新增对应的提交方法：

methods: {
  // 其他原有方法...
  async handleCheckUpdate(element) {
    try {
      await axios.put(`api/blabla/${element.id}`, {
        checked: element.checked
      })
    } catch (err) {
      console.error('提交状态失败：', err)
    }
  }
}

备选方案：使用watch实现 #

如果你确实需要通过watch监听实现，需要对整个checklist数组开启深度监听，不过这种方式会在数组任何变动（新增/删除/修改项）时都触发，性能低于事件绑定方案：

watch: {
  checklist: {
    deep: true,
    handler(newVal, oldVal) {
      // 对比新旧数组找到发生checked变化的项
      const changedItem = newVal.find((item, index) => {
        return item.checked !== oldVal[index].checked
      })
      if (changedItem) {
        axios.put(`api/blabla/${changedItem.id}`, {
          checked: changedItem.checked
        }).catch(err => console.log(err))
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者ibrahimcankarta