layui单选框必须在mounted中用$nextTick初始化，确保DOM就绪；name用于浏览器分组互斥，lay-filter用于事件监听，二者缺一不可；Vue数据需手动同步，弹窗内需手动render。
layui单选框必须在mounted里初始化
Vue组件的DOM还没挂载时，layui.use('form') 会找不到表单元素，直接调用 form.render() 也无效。必须等 mounted 触发、且 DOM 渲染完成后再操作。
常见错误是把初始化逻辑写在 created 或 beforeMount，此时 document.querySelector('.layui-form') 返回 null，后续所有监听都失效。
- 务必用
this.$nextTick(() => { /* 初始化代码 */ })包一层，确保 DOM 已就绪 - 不要在
v-for循环生成的单选框上直接写lay-filter，每个单选组必须有唯一name，且整组共用一个lay-filter - 如果单选框是异步加载（比如从接口拉取选项），要在数据更新后再次调用
form.render('radio')
lay-filter 和 name 属性不能混用
layui 的单选框依赖 name 分组、lay-filter 绑定事件，两者语义不同但必须协同工作。只设 name 不设 lay-filter，form.on('radio(filterName)') 监听不到；只设 lay-filter 不设 name，浏览器无法识别为同一组单选，用户可多选。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男" lay-filter="sexFilter">
<input type="radio" name="sex" value="1" title="女" lay-filter="sexFilter">
</div>
</div>
</form>-
name="sex"是浏览器原生分组依据，决定互斥行为 -
lay-filter="sexFilter"是 layui 事件绑定标识，监听时用form.on('radio(sexFilter)', ...) - 若页面多个单选组，每组用不同
lay-filter值，避免事件交叉触发
Vue响应式数据怎么和layui单选框同步
layui 单选框修改后不会自动更新 Vue 的 data，必须手动赋值；反过来，Vue 数据变化也不会重绘单选框状态 —— 这是典型 DOM 与响应式脱节问题。
解决方式不是“双向绑定”，而是“单向桥接”：
- 监听
form.on('radio(filterName)')，在回调里显式赋值给this.formData.sex = data.value - 如果初始值来自 Vue data（比如
formData.sex = '1'），需在mounted中调用form.val('filterName', { sex: this.formData.sex })预设状态 - 禁止直接操作
input.checked = true，这会绕过 layui 内部状态管理，导致后续form.getValue()失效
layer弹窗里放layui单选框容易漏掉render
在 layer.open() 打开的弹窗中动态插入含 layui-form 的 HTML 后，layui 不会自动识别新节点里的单选框 —— 它只在初始化时扫描一次 DOM。
必须手动触发渲染：
- 弹窗内容用字符串模板拼接时，在
success回调里调用layui.form.render('radio') - 若弹窗内容是 Vue 组件，且该组件内含单选框，需在组件
mounted中再次layui.use('form', ...)，不能复用父组件的 form 实例 - 注意：
form.render('radio')只渲染 radio 类型，不带参数则渲染全部表单控件，性能开销更大
最常被忽略的是 layer 弹窗关闭后再次打开，未清空旧状态或重复初始化，导致单选框勾选错乱或事件绑定多次。每次打开前建议先 form.val('filterName', {}) 重置。
