代码语言：javascript复制
<form action="{{route('admin.node.update',$node)}}" class="layui-form" id="form-node-edit" @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" v-model="pid">
<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" v-model="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" v-model="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" v-model="is_menu" value="0" v-model.lazy="info.is_menu" lay-skin="primary" title="否">
<input type="radio" name="is_menu" v-model="is_menu" value="1" v-model.lazy="info.is_menu" lay-skin="primary" title="是" checked="">
</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>
<script>
const _token = "<?php echo e(csrf_token()); ?>";
new Vue({
el: '#form-node-edit',
data:{
info:{
name: "{{$node->name}}",//给后端传值
pid:"{{$node->pid}}",
route_name:"{{$node->route_name}}",
is_menu: "{{$node->is_menu}}",
_token:_token
}
},
created(){//初始化赋值
this.pid = "{{$node->pid}}";
this.name = "{{$node->name}}";
this.route_name = "{{$node->route_name}}";
this.is_menu = "{{$node->is_menu}}";
},
methods:{
/*doPost(evt){
let url = evt.target.action;
$.post(url, this.info).then(ret => {
console.log(ret)
});
}*/
//异步变同步 es7 async await
async doPost(evt){
let url = evt.target.action;
$.ajax({
'url':url,
'data':this.info,
'type': 'PUT'
}).then(ret => {
if(ret.status== 0) {
layer.msg(ret.msg,{icon:1,time:2000}, ()=> {
location.href = "{{route('admin.node.index')}}";
});
} else {
layer.msg(ret.msg,{icon:2,time:2000});
}
});
},
changePid(evt){//select 赋值
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>
