laravel 8 结合vue实现添加

form表单

<form action="node.store" method="post" class="form form-horizontal" @submit.prevent="dopost">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否顶级：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <span class="select-box">
                        <select class="select" @change="changePid">
                            <option value="0">==顶级==</option>
                            @foreach($data as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <!--- lazy 延时绑定 -->
                    <input type="text" class="input-text" name="name" v-model.lazy="info.name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">路由别名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="route_name" v-model="info.route_name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否菜单：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input type="radio" value="0" v-model="info.is_menu">
                        <label for="sex-1">否</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" value="1" v-model="info.is_menu">
                        <label for="sex-2">是</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加节点">
                </div>
            </div>
        </form>

vue处理

<script src="/js/vue.js"></script>
    <script>
        new Vue({
            el: '.page-container',
            data: {
                info: {
                    _token: "{{ csrf_token() }}",
                    pid: 0,
                    name: '',
                    route_name: '',
                    is_menu: 0
                }
            },
            methods: {
                /*dopost(evt) {
                  //console.log(evt.target.action);
                  //console.log(evt.target.getAttribute('action'));
                  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;
                    let {status, msg} = await $.post(url, this.info);
                    if (status === 0) {
                        location.href = "{{ url('admin.node.index') }}";
                    } else {
                        layer.msg(msg, {icon: 2, time: 1000});
                    }
                },
                // 下拉
                changePid(evt) {
                    console.log(evt.target.value);
                    // 下拉的值 evt.target select 的dom对象
                    this.info.pid = evt.target.value || 0;
                }
            }
        });


    </script>

ajax删除

<script>
        // 生成一个token crsf
        const _token = "{{ csrf_token() }}";
        // 给删除按钮绑定事件
        $('.delbtn').click(function (evt) {
            // 得到请求的url地址
            let url = $(this).attr('href');
            // 发起一个delete请求
            $.ajax({
                url,
                data: {_token},
                type: 'DELETE',
                dataType: 'json'
            }).then(({status, msg}) => {
                if (status == 0) {
                    // 提示插件
                    layer.msg(msg, {time: 2000, icon: 1}, () => {
                        // 删除当前行
                        $(this).parents('tr').remove();
                    });
                }
            });
            // jquery取消默认事件
            return false;
        });

    </script>