![在这里插入图片描述](
)
<div id="sd">
<input type="hidden" id="ids" value="{$ids}" >
<div class="layui-form-item">
<label class="layui-form-label">菜单名称</label>
<div style="width: 78%;height: 120px;border: 1px solid white;margin-left: 13%;">
<div v-for="(val,key) in commentarr" style="margin: 10px;">
<a href="#" style="float: left;width: 100px;" @click="pushUg(key)">{{val.name}}</a>
</div>
</div>
</div>
<div style="width: 78%;height: 220px;border: 1px solid black;margin-left: 13%;">
<ol>
<li v-for="(value,key) in userlist" id="cenmt" style="width: 100px;float: left;">
{{value.name}} <a href="#" @click="deleUg(key)">X</a>
</li>
</ol>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" @click="submit()">提交修改</button>
</div>
</div>
</div>
var vm = new Vue({
el: '#sd', //vue绑定
data: {
userlist: [],
commentarr:[]
},
methods: {
deleUg:function (k) {//点击x删除userlist数组中的一项
this.userlist.splice(k,1);
},
pushUg:function (ke) {//点击上面的菜单名称赋值到userlist数组中
var type=0;
for(var i=0;i<this.userlist.length;i++){
if(this.userlist[i].id == this.commentarr[ke].id){
type=1;
}
}
if(type==0){//通过push的方式
this.userlist.push(this.commentarr[ke]);
}
},
submit:function () {//点击提交
var ids=$("#ids").val();
$.ajax({
type:'post',
data:{
list:this.userlist,
id:ids
},
dataType:'json',
url:'{:url("admin/Comment/suremenu")}',
async:true,
success:function (data){
dialog.lastpage(data.msg);
}.bind(this),
error:function (err) {
console.log(err);
}
});
}
},
created:function () {//生命周期 进入修改界面直接发送ajax绑定vue定义的userlist和commentarr
var ids=$("#ids").val();
$.ajax({
type:'post',
data:{
id:ids
},
dataType:'json',
url:'{:url("admin/Comment/choicemenus")}',
async:true,
success:function (data){
this.userlist=data[0];
this.commentarr=data[1];
}.bind(this),
error:function (err) {
console.log(err);
}
});
}
})