vue3如何解决input复选框绑定v-model后勾选一个所有复选框都被勾选的问题

在Vue 3中，如果你遇到复选框 (checkbox) 使用 `v-model` 绑定后，勾选其中一个导致其他复选框也被自动勾选的问题，这通常是由于数组方法 `toggle` 或者单例数据模型导致的。解决这个问题的一个常见方法是：

1. **使用 `v-model` 和数组索引**：
将每个复选框绑定到一个数组的索引上，而不是直接的布尔值。例如：

   <template>
     <div>
       <input v-model="items.map((item, index) => item.checked)" type="checkbox" :key="index" :value="true" />
       <!-- ... -->
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         items: [{ checked: false }, { checked: false }]
       };
     }
   };
   </script>

这样每个复选框的操作只会改变它所在数组项的状态，不会影响其他元素。

2. **避免使用 `toggle` 方法**：
如果你在组件内部有 `toggleAll()` 类似的方法，可以移除或者修改这个方法，只操作单独的复选框。

3. **使用自定义指令**：
如果你需要全局统一处理这类情况，可以创建一个自定义指令来管理复选框的行为，确保它们互斥。