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

【问题标题】：how to watch checkbox value in vue?如何查看vue中的复选框值？
【发布时间】：2021-12-23 00:14:24
【问题描述】：

我用 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" 值，并且我想使用 axios 将其发布到 API。它的外观可能是这样的；

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
    },
]```

【问题讨论】：

stackoverflow.com/questions/42133894/…
根本不看复选框。观察控制复选框状态的变量。在现代 SPA 框架中工作时，最好将 DOM 视为应用程序数据的副作用表示。

标签： javascript vue.js checkbox axios

【解决方案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)
  })
}

【讨论】：