已打开模态时的Vue Js运行代码答案

【问题标题】：Vue Js running code when Modal has been oepend已打开模态时的Vue Js运行代码
【发布时间】：2017-07-03 12:59:47
【问题描述】：

我有一个带有 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'));

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

要执行我的任务，我不需要检查模式是否打开。在初始页面加载时，我的道具 ID 设置为 null。所以我创建了一个观察者，用于观察我的 ID 何时更改以运行我的方法：

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

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

【讨论】：