Vue3中ListSwitcher组件Radio按钮无法手动切换问题求助

在Vue3的ListSwitcher组件中创建了type='radio'的单选按钮，包含listChecked和mapChecked两个选项。通过mounted钩子将mapChecked设置为选中状态时显示正常，但无法手动切换到listChecked选项，请问哪里操作有误？

原组件代码 #

模板代码 #

<div class="switcher">
    <input
      id="list"
      :checked="checked.listChecked"
      type="radio"
      class="changeState changeStateList"
      @change="listChange; checked.listChecked = true;"
    />
    <label for="list" class="listBtn"> </label>

    <input
      id="map"
      :checked="checked.mapChecked"
      type="radio"
      class="changeState changeStateMap"
      @change="mapChange; checked.mapChecked = true"
    />
    <label for="map" class="mapBtn"> </label>
    <span class="roundToggle"></span>
  </div>

脚本代码 #

props: {
    state: {
      type: String,
    },
  },
  emits: ['listSwitch'],
  data() {
    return {
      checked: {
        listChecked: null,
        mapChecked: null,
      },
    };
  },
  mounted() {
    if (this.state === 'map') {
      this.checked.mapChecked = true;
    }
    console.log(this.checked.mapChecked)
  },
  methods: {
    listChange() {
      {
        this.$emit('listSwitch', 'list');
      }
    },
    mapChange() {
      {
        this.$emit('listSwitch', 'map');
      }
    },
    emits: ['listSwitch'],
  },

父组件引用代码 #

<div class="state-change">    
  <ListSwitcher @listSwitch="onClickListSwitcher" state="map"/>   
</div>

错误点说明 #

1. 单选按钮未分组：两个radio没有设置相同的name属性，浏览器无法识别它们是同一组单选控件，切换时不会自动取消另一个的选中状态。
2. 状态更新逻辑混乱：在@change事件里直接赋值checked.listChecked = true，但未同步将另一个选项设为false，导致状态冲突；同时这种直接修改的方式不符合Vue响应式的最佳实践。
3. 组件配置错误：emits被错误地写在methods内部，应该放在组件顶层配置中。
4. 初始化逻辑不完整：mounted钩子只处理了state='map'的情况，未覆盖state='list'的场景，初始状态可能异常。

修正后的代码 #

模板代码（添加name属性，统一事件处理） #

<div class="switcher">
    <input
      id="list"
      :checked="checked.listChecked"
      type="radio"
      name="viewSwitch" <!-- 新增：同一组单选按钮设置相同name -->
      class="changeState changeStateList"
      @change="handleSwitch('list')" <!-- 统一调用处理方法 -->
    />
    <label for="list" class="listBtn"> </label>

    <input
      id="map"
      :checked="checked.mapChecked"
      type="radio"
      name="viewSwitch" <!-- 新增：同一组单选按钮设置相同name -->
      class="changeState changeStateMap"
      @change="handleSwitch('map')" <!-- 统一调用处理方法 -->
    />
    <label for="map" class="mapBtn"> </label>
    <span class="roundToggle"></span>
  </div>

脚本代码（修复配置，统一状态更新） #

<script>
export default {
  props: {
    state: {
      type: String,
      default: 'list' // 新增：设置默认值，避免未传参时状态异常
    },
  },
  emits: ['listSwitch'], // 修正：放在组件顶层
  data() {
    return {
      checked: {
        listChecked: false, // 初始化设为布尔值，避免null的问题
        mapChecked: false,
      },
    };
  },
  mounted() {
    // 优化：统一初始化选中状态
    this.checked.listChecked = this.state === 'list';
    this.checked.mapChecked = this.state === 'map';
  },
  methods: {
    // 新增：统一处理切换逻辑，保证状态互斥
    handleSwitch(type) {
      this.checked.listChecked = type === 'list';
      this.checked.mapChecked = type === 'map';
      this.$emit('listSwitch', type);
    },
    // 删除冗余的listChange、mapChange方法，合并为handleSwitch
  },
};
</script>

父组件代码（保持不变，如需双向绑定可扩展） #

<div class="state-change">    
  <ListSwitcher @listSwitch="onClickListSwitcher" state="map"/>   
</div>

内容的提问来源于stack exchange，提问作者Fonteyn Atlas