layui触发vue中值改变（select、radio、checkbox）

最新推荐文章于 2025-06-15 10:00:00 发布

facker_CN

最新推荐文章于 2025-06-15 10:00:00 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 vue layui

本文链接：https://blog.csdn.net/qq_17336135/article/details/104245205

前端同时被 3 个专栏收录

3 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本文探讨如何在Vue框架中实现LayUI组件的数据实时更新。通过实例讲解单个和多个下拉菜单的选择事件监听，使Vue数据与LayUI视图保持同步，适用于动态表单场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题

当我们在layui中使用select、radio、checkbox的时候，我们会发现，即使我们修改了对应的值，但是vue中的值却无动于衷，如何才能让layui中的值，能触发vue中值的改变，就是我们本次需要讨论的话题。

更新单个下拉菜单

只有一个需要触发的时候，网上有很多解决方法。

eg:

<select v-bind="sex"  lay-filter="changeSex">
	<option value="0">保密</option>
	<option value="1">男</option>
	<option value="2">女</option>
	<option value="3">其他</option>
</select>

// vue
var app = new Vue({
    el: '#app',
    "data": {
        "sex": "1",
    },
    // 监听数据变化 触发layui视图更新
    updated:function(){
        layui.use(['form'], function(){
            form.render();
        })
    }
});
// layui监听下拉选择事件
form.on('select(changeSex)', function (data) {
	app.sex = data.value;
	// app.updateSex(data.value) 当然你可以在这直接触发其他事件
});

至此我们就实现了单个layui视图的动态更新
参考layui的文档，我们可以同理监听select、radio、checkbox的变化。checkbox和switch的监听有所不同，但是大同小异。

附1：layui 表单模块文档
 附2：vue 中updated的使用

更新多个下拉菜单

但是有时候，我们需要维护一个列表，我们依然可以采用如上的方法，只是有点改动.

<table class="layui-table">
    <colgroup>
        <col>
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(one,key) in list">
        <td>
            <div class="layui-input-inline" style="width: 20px;float: left;">
                {{one.name}}
            </div>
        </td>
        <td>
            <div class="layui-input-inline">
                <select name="type" id="" v-model="one.sex" lay-filter="changeSex" v-bind:data-key="key">
                    <option value="0">保密</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                    <option value="3">其他</option>
                </select>
            </div>
        </td>
    </tr>
    </tbody>
</table>

// vue
var app = new Vue({
    el: '#app',
    "data": {
        list:[
            {
                "name": "小明",
                "sex": "1",
            },{
                "name": "小张",
                "sex": "3",
            },{
                "name": "小红",
                "sex": "2",
            },
        ],
    },
    updated:function(){
        layui.use(['form'], function(){
            form.render();
        })
    }
});
// layui监听下拉选择事件
form.on('select(changeSex)', function (data) {
    var key = $(data.elem).data("key"); 
    // layui 会将key转成小写 例如userSex会转化成usersex 接收的时候 需要写成 $(data.elem).data("usersex") 而不是userSex
    console.log(app.list[key]);
    app.list[key].sex = data.value;
	// app.updateSex(app.list[key], data.value) 当然你可以在这直接触发其他事件
});