vue radio 反选

Vue.js中的Radio按钮（单选按钮）用于让用户从多个选项中选择一个，通常会有一个"全选/反选"功能，这可以通过监听Radio组中的`change`事件来实现。当你需要某个Radio按钮被选中时，所有其他同组的Radio按钮会被取消选中。以下是一个简单的例子：

<template>
  <div>
    <label v-for="(option, index) in options" :key="index">
      <input type="radio" :value="option.value" v-model="selectedOption" @change="toggleOthers(index)">
      {{ option.label }}
    </label>
    <p>已选择: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
      selectedOption: '', // 初始值为空，表示未选择
    };
  },
  methods: {
    toggleOthers(index) {
      this.$set(this.options, index, { value: '', disabled: true });
      this.selectedOption = this.options.find(option => !option.disabled)?.value || '';
    },
  },
};
</script>

在这个例子中，我们使用了`v-model`绑定到`selectedOption`，当用户选择一个Radio时，`toggleOthers`方法会被调用。如果被选中的 Radio 的索引是`index`，那么这个选项会被禁用并更新`selectedOption`。其他选项也会相应地更新为未选中状态。