Laravel 5，Vue 2-通过控制器发送html表单，并将提交操作绑定到组件方法

我试图将动作绑定到组件方法，绑定到通过ajax响应（json）发送的按钮

到目前为止，我有两个Vue组件-服务和模式

服务：

<template>
    <div>
        <h1>Services ({{ services.length }})</h1>
        <div class="services-actions">
            <button type="button" class="btn btn-primary" @click="openModal">Add Service</button>
        </div>
        <div class="services" v-for="(service, index) in services" :key="service.id">
            <p>{{ service.name }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            services: []
        }
    },
    methods: {
        getAll(){
            axios.get('/admin/services/all', {})
            .then((response) => {
                this.services = response.data
            })
        },
        openModal(){
            axios.get('/admin/services/create', {})
            .then((response) => {
               Event.$emit('modal:show', response.data)
            })

        },
        save(){
            console.log('test');
        }

    },
    mounted(){
        this.getAll()
    }
}
</script>

服务（{Services.length}}）
添加服务
{{service.name}

导出默认值{
数据（）{
返回{
服务：[]
}
},
方法：{
getAll（）{
get（'/admin/services/all'，{}）
。然后（（响应）=>{
this.services=response.data
})
},
openModal（）{
get（'/admin/services/create'，{}）
。然后（（响应）=>{
事件.$emit（'modal:show'，response.data）
})
},
保存（）{
console.log（'test'）；
}
},
安装的（）{
这个。getAll（）
}
}

模态：

<template>

    <div class="modal fade" tabindex="-1" role="dialog" id="main-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">


            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</template>

<script>
    export default {
        mounted(){

            let mainModal = $('#main-modal')

            Event.$on('modal:show', (html) => {
                mainModal.find('.modal-content').html(html)
                mainModal.modal('show')
            })

            Event.$on('modal:hide', () => {
                mainModal.modal('hide')
            })
        }
    }
</script>

导出默认值{
安装的（）{
设mainmodel=$（“#main model”）
事件。$on（'模式：显示'，（html）=>{
mainModal.find（'.modal content'）.html（html）
mainModal.modal（'show'）
})
事件。$on（'模式：隐藏'，（）=>{
mainModal.modal（'hide'）
})
}
}

查看文件：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Modal title</h4>
</div>

<form id=service-store action='/admin/service/store'>

    <label for="name">Name</label>
    <input type="text" name=name id=name>

</form>

<div class="modal-body">
    <p>One fine body&hellip;</p>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

&时代；
情态标题
名称
一个好身体&hellip

接近
保存更改

---

当我点击保存更改按钮时，是否可以将保存更改绑定到服务组件保存方法？

哪个提交按钮？对不起，我的错误-我的意思是从视图文件（在模式页脚中）保存更改按钮。另外，这个“视图文件”是什么？这和其他人有什么关系？

'/admin/services/create'

服务返回的是这个视图文件吗？是的，这是通过ajax（刀片模板文件）发送的html（Laravel controller将视图文件作为json响应发送）。