如何解决input属性加入v-model后选择一个导致全选的问题

当在 Vue 中使用 `v-model` 绑定 `input` 元素，并且这个元素支持 `type="checkbox"` 或者 `type="radio"` 的单选或多选功能，有时可能会遇到全选所有选项的问题。这通常是因为 `v-model` 默认会绑定到复选框或单选按钮组的第一个元素，如果你有多个这样的控件在同一时间设置 `v-model`，它们之间可能存在联动，导致一个被选中就会自动勾选其他同组的选项。

要解决这个问题，你可以采用以下策略：

1. **单选模式**: 如果只需要用户从一组选项中选择一个，建议将每个 `input` 设置独立的 `value` 和关联的 `v-model`。例如：

   <template>
     <div>
       <input type="radio" v-model="selectedValue" value="option1">
       <label>Option 1</label>

       <input type="radio" v-model="selectedValue" value="option2">
       <label>Option 2</label>
     </div>
   </template>

   <script>
   export default {
     data() {
       return { selectedValue: 'option1' };
     }
   };
   </script>

2. **数组绑定**: 如果需要处理多选并且希望保留独立的选择状态，可以将 `v-model` 指向一个数组，每个值对应于一个选项。这样，选择一个项会添加到数组中，而不是影响其他项的状态：

   <template>
     <div>
       <input type="checkbox" v-model="options.includes('option1')">
       <label>Option 1</label>

       <input type="checkbox" v-model="options.includes('option2')">
       <label>Option 2</label>
     </div>
   </template>

   <script>
   export default {
     data() {
       return { options: ['option1', 'option2'] };
     }
   };
   </script>

通过上述方法，你可以避免 `v-model` 导致的全选问题。如果有多个列表或表单组件，记得为每个单独处理，以防意外联动。