如何在窗口尺寸调整时保留响应式单选按钮组的选中状态

问题根因 #

• 你为大屏、小屏分别写了两套完全独立的单选按钮DOM，仅通过CSS控制显隐，两套DOM的选中状态没有做同步，切换屏幕尺寸显示另一套DOM时，自然会丢失之前的选择
• 单选按钮未设置value属性，也没有和组件内存储选中状态的selected变量做绑定，选中状态仅依赖原生DOM的checked属性，DOM切换后状态无法保留
• 两套单选按钮使用了重复的id属性，不符合HTML规范，也会导致label和单选框的关联异常

最优解决方案 #

不要拆分两套DOM，仅用一套单选按钮，通过响应式CSS类适配不同屏幕的布局样式，从根源避免状态同步问题。

修改后的Questioncard.vue代码如下：

<template>
  <br />
  <br />
  <div>
    <!-- 屏幕尺寸提示用响应式类控制显隐 -->
    <h1 class="hidden sm:block">Large Screen</h1>
    <h1 class="sm:hidden">Small Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center sm:justify-center sm:w-full w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'yes'"
        value="yes"
        :checked="selected === 'yes'"
      />
      <label
        :for="carData.id + 'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center sm:justify-center sm:w-full w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'no'"
        value="no"
        :checked="selected === 'no'"
      />
      <label
        :for="carData.id + 'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["carData"],
  data() {
    return {
      selected: null,
    };
  },
  methods: {
    onChange(event) {
      this.selected = event.target.value;
    },
  },
};
</script>

<style scoped>
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  background-color: #78be20;
}
</style>

备选方案（若必须保留两套DOM） #

如果确实需要拆分两套DOM结构，需要给两套单选按钮都绑定checked属性关联selected变量，同时为两套按钮设置不同的id避免冲突：

• 大屏按钮id改为carData.id + 'yes-lg'、carData.id + 'no-lg'
• 小屏按钮id改为carData.id + 'yes-sm'、carData.id + 'no-sm'
• 所有单选按钮都添加value属性，以及:checked="selected === 'yes'"/:checked="selected === 'no'"的绑定

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