Vue.js Bootstrap 4单选按钮默认选中失效问题求助

嘿，我来帮你排查下这个问题！单选按钮设置默认选中失效通常是几个常见的小问题导致的，咱们一个个来看：

1. 检查单选按钮组的name属性是否一致 #

单选按钮必须共享同一个name属性，浏览器才会把它们识别为互斥的一组。如果你的「Mrs」按钮和其他选项（比如Mr、Ms）的name不一样，哪怕加了checked属性，也不会按预期生效。举个正确的例子：

<!-- 正确写法 -->
<input type="radio" name="user-title" value="mr"> Mr
<input type="radio" name="user-title" value="mrs" checked> Mrs
<input type="radio" name="user-title" value="ms"> Ms

要是每个按钮的name都独立，浏览器会把它们当成互不相关的单选控件，默认选中逻辑就乱了。

2. 确认checked属性的写法符合标准 #

HTML里的布尔属性（比如checked）只要存在就代表「选中」，不需要额外赋值（像checked="true"这种写法其实是冗余的，甚至在部分老浏览器里可能出问题）。正确的写法就是直接写checked：

<!-- 推荐的正确写法 -->
<input type="radio" name="user-title" value="mrs" checked> Mrs

<!-- 不推荐的写法（可能引发兼容问题） -->
<input type="radio" name="user-title" value="mrs" checked="true"> Mrs
<input type="radio" name="user-title" value="mrs" checked="checked"> Mrs

3. 排查是否有JavaScript覆盖了默认状态 #

如果页面里有DOM加载后执行的JS脚本，不小心修改了单选按钮的checked值，那你的默认设置就会被覆盖。比如这类代码：

// 会强制取消Mrs的选中状态
document.querySelector('input[value="mrs"]').checked = false;

或者有没有表单重置、动态渲染的逻辑，无意中把选中状态重置了，都要检查一下。

4. 检查是否存在重复的name或id #

如果页面里有多个相同name的单选按钮组，或者同一个按钮被重复定义，浏览器可能会混淆选中状态。确保你的单选按钮组是唯一的，没有重复的属性值。

5. 尝试清除浏览器缓存或换模式测试 #

有时候浏览器缓存了旧页面状态，或者渲染时出了小bug。你可以试试强制刷新页面（Ctrl+F5），或者用隐身模式打开页面，看看默认选中是否正常生效。

先从这几个方向排查，大概率能找到问题所在！

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