代码语言：javascript复制
<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>
