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

在Vue.js中，如果你的input复选框使用了`v-model`双向数据绑定，并且其中一个复选框被设为默认选中(`checked`)，其他复选框也同时被勾选，这是因为当`v-model`监听到第一个已选中复选框的状态改变时，它会同步更新绑定的数据状态，从而影响所有的复选框。

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

1. **避免直接设置默认值**：在模板上不要给任何一个复选框设置`checked`属性，而是通过数据驱动来控制默认选择。

<template>
  <div>
    <input type="checkbox" v-model="selectedOption" />
    <!-- 其他复选框... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null, // 初始设为null或undefined
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // ...
      ]
    };
  }
}
</script>

2. **手动触发事件**：在用户首次点击某个复选框时，检查并清除其他选项的选中状态。

methods: {
  toggleSelect(option) {
    this.selectedOption = option.value;
    // 清除其他选项
    this.options.forEach((o) => {
      if (o !== option) {
        o.checked = false; // 如果不是当前选项，则取消选中
      }
    });
  }
}

然后在HTML中绑定点击事件：

<template>
  <div>
    <input type="checkbox" @click="toggleSelect(option1)" :value="option1.value" />
    <!-- 为每个复选框添加同样的事件处理 -->
  </div>
</template>

这样就实现了单选功能，只有被用户主动选择的选项才会被标记为选中。