vue获取多选框选中的值

要在Vue中获取多选框选中的值，可以使用v-model指令将多个勾选框绑定到同一个数组。\[2\]首先，在Vue实例的data属性中定义一个空数组，例如checkedNames。然后，在每个勾选框的v-model属性中绑定该数组。当用户勾选或取消勾选一个选项时，该选项的值将自动添加或从数组中移除。最后，你可以通过访问该数组来获取所有选中的值。

例如，假设有三个勾选框，分别具有id为"jack"、"john"和"mike"，并且它们的值分别为"Jack"、"John"和"Mike"。你可以在Vue实例中定义一个名为checkedNames的数组，并将每个勾选框的v-model属性绑定到该数组。最后，你可以通过访问checkedNames数组来获取所有选中的值。

示例代码如下：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

<script>
new Vue({
  el: '...',
  data: {
    checkedNames: \[\]
  }
})
</script>

在上述代码中，当用户勾选或取消勾选一个选项时，checkedNames数组将自动更新，包含所有选中的值。你可以通过访问checkedNames数组来获取这些值。
#### 引用[.reference_title]
- *1* [VUE项目中 获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ...](https://blog.csdn.net/u011314442/article/details/87796126)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue系列之获取多选框中被选中的值](https://blog.csdn.net/aiguai2216/article/details/102272551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]