时间戳

首页 > 解决方案 > 如何查看vue中的复选框值？

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

问题描述

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

标签： javascriptvue.jscheckboxaxios

解决方案

你不需要在这里使用手表......你需要做的就是绑定一个@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)
  })
}

推荐阅读