vue中如何查看复选框的值？

Question

我用 vue 创建了一些动态复选框，它们看起来像这样；

<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">
                <input type="checkbox" id="checkbox" v-model="element.checked" class="w-6">
                <label for="checkbox" class="px-2">{{element.content}}</label>
              </div>
            </div>
          </li>

我想在 vue 中使用 watch() 函数观察 "element.checked" 值，我想 post 到 API使用 axios。它看起来可能是这样的；

watch: {
 element.checked() { // doesn't work
  axios.put('api/blabla' + element.id, // I'm not sure here, I'm just trying to compare
   checked: this.element.checked
  })
  .catch(err => {
     console.log(err)
  })
 }
}

我只是在寻找一种方法，它可能会有所不同。上面的代码只是一个猜测 element.checked 报错。

顺便说一下，我的清单看起来像；

"checklist": [
    {
      "content": "lorem ipsum dolor",
      "checked": true,
      "id": 1
    },
    {
      "content": "lorem ipsum dolor sit",
      "checked": false,
      "id": 2
    },
]```

Answer 1

你不需要在这里使用手表......你需要做的就是绑定一个@change事件，比如

<input type="checkbox" id="checkbox" v-model="element.checked" @change="customMethod" class="w-6">

在方法中

methods: {
customMethod() {
  axios.put('api/blabla' + element.id,
   checked: this.element.checked
  })
  .catch(err => {
     console.log(err)
  })
}

vue中如何查看复选框的值？

how to watch checkbox value in vue?

javascript

checkbox

vue.js

axios