layui与vue同时使用，绑定数据，无法正确显示的问题

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

原创最新推荐文章于 2025-06-15 10:00:00 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #vue

前端专栏收录该内容

3 篇文章

订阅专栏

在项目中遇到layui组件与vue框架同时使用时，数据绑定出现异常，主要表现为根据'上午'、'下午'的选择，应当动态显示的菜品信息未能正确更新。问题集中在layui的复选框样式与vue的双向数据绑定不协调。解决方案需要深入理解两者的工作原理并进行适配。

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

功能描述：根据“上午”、“下午”的不同选择，展示不同的菜品信息
菜品复选框使用layui的样式，复选框的文字使用vue绑定

<div class="main-head">
        <p><span>在线预定</span></p>
    </div>
    <div class="main-reserve">
        <form action="#" method="post" id="food-reserve" class="layui-form">
            <ul>
                <li>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" onchange="selectFood()" lay-search="">
                            <option value="0" selected>请选择时间范围</option>
                            <option value="1">上午</option>
                            <option value="2">下午</option>
                        </select>
                    </div>
                </div></li>
                
                <div class="layui-form-item" style="display: none" id="menuList">
                    <label class="layui-form-label">选择菜品</label>
                    <div class="layui-input-block" id="menu">
                        <input v-for="info in obj" type="checkbox" name="foodId" v-bind:title="info.fcname + '/￥' + info.fprice" v-bind:value="info.id">
                        <!--<input type="checkbox" name="like[read]" title="阅读">
                        <input type="checkbox" name="like[game]" title="游戏">-->
                    </div>
                </div>
            </ul>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>

相应js代码部分

<script>
    var form;
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        form.on('select', function(data){
            //获取被选中的option标签
            var flag = data.value;
            if (flag == 1) {
                $("#menuList").show();
                findDinner();
            } else if (flag == 2){
                $("#menuList").show();
                findLunch();
            } else {
                alert("请选择时间范围");
            }
        });
    });

</script>

<script type="application/javascript">
    var menu = new Vue({
        el:"#menu",
        data:{
            obj:[]
        }
    })

    function findLunch() {
        findMenu("午餐");
    }

    function findDinner() {
        findMenu("晚餐");
    }

    function findMenu(type) {
        $.ajax({
            type:"get",
            url:"/Restaurant/food/orderMenu.do?type=" + type,
            dataTyep:"json",
            success:function(data) {
                if (data.code == 1) {
                    menu.obj=data.info;
                    /* 设置延迟时间，避免vue与layui同时数据绑定造成的冲突 */
                    setTimeout(function () {
                        form.render('checkbox');
                    }, 300);
                }

            }
        })
    }

</script>