<form action="{{route('admin.node.store')}}"  class="layui-form" id="form-node-add" @submit.prevent="doPost">
                <div class="layui-form-item">
                    <label  class="layui-form-label">
                        <span class="x-red">*</span>是否顶级菜单</label>
                    <div class="layui-input-inline">
                        <select name="pid" class="select" @change="changePid">
                            <option value="0">==顶级菜单==</option>
                            @foreach($data as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label">
                        <span class="x-red">*</span>节点名称</label>
                    <div class="layui-input-inline">
                        {{--v-model.lazy vue.js 延时绑定--}}
                        <input type="text"  name="name"  class="layui-input" v-model.lazy="info.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label">路由别名</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="route_name"   class="layui-input" v-model.lazy="info.route_name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="x-red">*</span>是否菜单</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_menu" value="0" v-model.lazy="info.is_menu" lay-skin="primary" title="否" checked="">
                        <input type="radio" name="is_menu" value="1" v-model.lazy="info.is_menu" lay-skin="primary" title="是">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label"></label>
                    <button class="layui-btn">确认添加</button>
                </div>
            </form>

<script src="/admin/js/vue@2.6.11.js"></script>   ######引入vue.js
<script>
    const _token = "<?php echo e(csrf_token()); ?>";
    new Vue({
        el: '#form-node-add', #####对应form 的id 或者class ( el: '.form-node-add')                 
        data:{
            info:{
                name:'',
                pid:0,
                route_name:'',
                is_menu:0,
                _token:_token
            }
        },
        methods:{
             #####doPost()对应form的@submit.prevent="doPost"
            /*doPost(evt){
                let url = evt.target.action;
                $.post(url, this.info).then(ret => {
                    console.log(ret)
                });
            }*/
            #####doPost()对应form的@submit.prevent="doPost"
            //异步变同步 es7 async await
            async doPost(evt){
                let url = evt.target.action;
                let {status,msg} = await $.post(url, this.info);
                if(status == 0) {
                    layer.msg(msg,{icon:1,time:2000}, ()=> {
                        location.href = "{{route('admin.node.index')}}";
                    });
                } else {
                    layer.msg(msg,{icon:2,time:2000});
                }
            },
            changePid(evt){
                this.info.pid = evt.target.value || 0;
            }
        },
    /*  created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。*/
        mounted(){
            /* 单选样实*/
            layui.use(['form'], function () {
                var form = layui.form;
                // 监听全选
                form.on('checkbox(checkall)', function (data) {
                    if (data.elem.checked) {
                        $('tbody input').prop('checked', true);
                    } else {
                        $('tbody input').prop('checked', false);
                    }
                    form.render('checkbox');
                });
            });
        }
    });
</script>