Question

我有一个带有ID的链接，我试图在引导程序打开后将数据加载到我的表单中（因为id可能与页面加载时的id不同）我怎样才能运行我的方法，一旦模态被打开了吗？

我希望每次通过链接

开启模态时运行setData方法

<template>
    <div>
       <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Edit Job</h4>
        </div>
        <div class="modal-body">

        </div>
    </div>
</div>

<script>
    export default
    {
        // I want to run this every time the modal is opened
        setData: function()
        {
            axios.get('/jobs/my-job/' + this.id)
            .then(response => {
                this.name = response.data.name
                this.summary = response.data.summary
                this.salarytype = response.data.salary_type
                this.salaryfrom = response.data.salary_from
                this.salaryto = response.data.salary_to
                this.location = response.data.location
                this.contactemail = response.data.contact
                this.contactphone = response.data.phone
            })
        },
</script>

我的html文件包含被调用的组件，该组件通过链接打开：

<a data-id='{$job->id}' onclick='getID({$job->id})' data-toggle='modal' data-target='#editJob'>


<div id="app">
    <div id="editJob" class="modal fade in" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content" id="edit-job">
                <edit-job :id="id"></edit-job>
            </div>
        </div>
    </div> 
</div>

设置数据在我的编辑作业组件中：

Vue.component('edit-job', require('./pages/jobs/edit-job.vue'));

Answer 1

要执行我的任务，我不需要检查模态是否打开。在初始页面加载时，我的prop Id设置为null。所以我创建了一个观察程序，以便在我的ID更改时运行我的方法：

    watch: {
        id: function(newid){
            this.setData()      
        }
    },

如果有人想加入讨论更好的方法等，我会保留这个答案。

当Modal一直在运行时，Vue Js正在运行代码

1 个答案: