vue界面操作

![在这里插入图片描述](

)
<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);
                }
            });
        }
    })