Vue3问题：单选框input已标记checked但浏览器未显示选中状态

可能的原因及修复方案 #

1. 样式冲突或自定义样式覆盖 #

如果使用了Bootstrap这类框架的form-check-input类，可能存在自定义CSS或框架样式优先级问题，导致选中状态的视觉样式未生效。

• 检查是否有自定义CSS覆盖了单选框的:checked伪类样式，确保核心选中样式未被覆盖：

  .form-check-input:checked {
      background-color: #0d6efd;
      border-color: #0d6efd;
  }
  

  若被其他规则覆盖，可通过增加父元素选择器提高权重：

  #catalogue-filter-order-list .form-check-input:checked {
      background-color: #0d6efd;
      border-color: #0d6efd;
  }
  

2. 值类型不匹配导致响应式同步异常 #

尽管orderBy.value输出正确，但如果values数组的元素类型与orderBy的初始值类型不匹配（比如一个是字符串、一个是数字），会导致Vue绑定逻辑出现视觉不同步。

• 确保values元素类型与orderBy初始值完全一致：比如values是['price', 'name']，则orderBy需初始化为ref('price')，而非其他类型。
• 若存在响应式更新延迟，可通过nextTick强制触发DOM同步：

  import { ref, nextTick } from 'vue'
  
  const orderBy = ref('price')
  const values = ref(['price', 'name'])
  
  nextTick(() => {
      document.querySelector(`input[value="${orderBy.value}"]`)?.dispatchEvent(new Event('change'))
  })
  

3. 浏览器渲染缓存问题 #

部分情况下浏览器会出现渲染缓存异常，可尝试强制刷新页面（Ctrl+F5）或禁用浏览器缓存后重新测试，验证是否解决视觉显示问题。

4. 重复的name/id属性干扰 #

检查页面中是否存在其他与当前单选框name="catalogue-order"重复的元素，或动态生成的ID是否存在重复情况——重复的属性会导致浏览器选中状态判断混乱，需确保每组单选框的name唯一、每个ID全局唯一。

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