Layui下拉框中v-model无效，因Layui动态渲染在Vue挂载后，原生select被隐藏且不触发change事件；需改用layui.form.on监听+手动赋值+this.$nextTick更新。
v-model 在 Layui 下拉框里直接写是无效的，因为 Layui 的 select 渲染是 DOM 操作，发生在 Vue 实例挂载之后，v-model 绑定早已完成，根本没机会接管 Layui 动态插入的 select 元素。
为什么 layui.form.render() 后 v-model 还不生效
Layui 的 form.render() 只负责样式和交互增强（比如美化原生 select、绑定点击事件），它不会触发 Vue 的响应式系统。Vue 的 v-model 依赖的是原生 input / change 事件，而 Layui 封装后的下拉框实际点击时，原生 select 并不触发 change，而是通过自定义事件（如 layui.form.on('select(xxx)')）通知。
- 你看到的下拉框是 Layui 用 div + ul + li 模拟出来的，真正的
select被隐藏了 -
v-model监听的是被隐藏的原生select，但它的 value 不会随 Layui UI 操作自动更新 - 除非你手动调用
selectEl.value = xxx; selectEl.dispatchEvent(new Event('change'))，否则 Vue 完全感知不到变化
正确做法：用 layui.form.on + 手动赋值 + $nextTick
放弃在模板里对 Layui select 写 v-model，改用事件监听 + 显式更新 Vue 数据。关键点是：必须等 Layui 渲染完再绑定事件，且赋值后要触发原生事件让 Vue 捕获。
- 在
mounted中调用layui.use('form', ...)，确保模块加载完成 - 用
layui.form.on('select(xxx)', callback)监听下拉选择，其中xxx是select的name属性值 - 在回调里手动设置 Vue data 中对应字段，例如
this.type = elem.value - 如果后续还要触发其他逻辑（比如联动加载），建议包一层
this.$nextTick(() => { /* 依赖更新后的 DOM */ })
mounted() {
layui.use('form', (form) => {
form.on('select(typeFilter)', (data) => {
this.type = data.value;
this.$nextTick(() => {
// 此时 this.type 已更新，可安全调用 search() 或触发子组件更新
});
});
});
}联动下拉框怎么避免互相干扰
多个 Layui 下拉框联动时，常见错误是：A 改变 → 清空 B → 重载 B 的选项 → form.render() → B 的 select 被重新渲染 → B 的 form.on 监听器丢失 → 后续选 B 就不再触发。
立即学习“前端免费学习笔记（深入）”；
- 每次调用
form.render()后，所有form.on绑定都会失效，必须重新绑定 - 不要在
form.render()后直接写新form.on，容易重复绑定；推荐封装一个bindSelectEvents()方法统一管理 - 清空下拉框内容时，用
$('#b-select').html('')而不是直接删 DOM，否则name属性可能丢失，导致form.on匹配失败 - 重载选项后，先
form.render('select')，再调用bindSelectEvents()
真正麻烦的不是写几行代码，而是每次 form.render() 都会重置事件绑定——这个细节在文档里几乎不提，但线上环境一出问题就是“点了没反应”，排查起来得翻 Layui 源码看 form.js 里 render 到底干了什么。
