收到响应后更新自定义组件的表单

Question

我正在尝试使用 Laravel Spark 在自定义组件中加载导师的个人资料。它会根据我输入的任何内容进行更新，但加载时始终为空。

组件本身如下：

Vue.component('tutor-settings', {

data() {
    return {
        tutor: [],

        updateTutorProfileForm: new SparkForm({
            profile: ''
        })
    };
},

created() {
    this.getTutor();

    Bus.$on('updateTutor', function () {
        this.updateTutorProfileForm.profile = this.tutor.profile;
    });
},

mounted() {
    this.updateTutorProfileForm.profile = this.tutor.profile;
},

methods: {
    getTutor() {
        this.$http.get('/tutor/current')
            .then(response => {
                Bus.$emit('updateTutor');
                this.tutor = response.data;
            });
    },

    updateTutorProfile() {
        Spark.put('/tutor/update/profile', this.updateTutorProfileForm)
            .then(() => {
                // show sweet alert
                swal({
                    type: 'success',
                    title: 'Success!',
                    text: 'Your tutor profile has been updated!',
                    timer: 2500,
                    showConfirmButton: false
                });
            });
    },
}

});

这是我拥有的内联模板：

<tutor-settings inline-template>
<div class="panel panel-default">
    <div class="panel-heading">Tutor Profile</div>

    <form class="form-horizontal" role="form">
        <div class="panel-body">
            <div class="form-group" :class="{'has-error': updateTutorProfileForm.errors.has('profile')}">
                <div class="col-md-12">
                    <textarea class="form-control" rows="7" v-model="updateTutorProfileForm.profile" style="font-family: monospace;"></textarea>

                    <span class="help-block" v-show="updateTutorProfileForm.errors.has('profile')">
                        @{{ updateTutorProfileForm.errors.get('profile') }}
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <!-- Update Button -->
            <button type="submit" class="btn btn-primary"
                    @click.prevent="updateTutorProfile"
                    :disabled="updateTutorProfileForm.busy">
                Update
            </button>
        </div>
    </form>
</div>

对 Vue 非常陌生，并尝试在旅途中学习！非常感谢任何帮助！

Answer 1

好的，首先bus应该用于组件之间的通信，而不是组件本身，所以updateTutor应该是一个方法：

methods: {
    getTutor() {
        this.$http.get('/tutor/current')
            .then(response => {
                this.tutor = response.data;
                this.updateTutor();
            });
    },
    updateTutor() {
       this.updateTutorProfileForm.profile = this.tutor.profile;
    }
}

现在还有一些需要注意的事项：

确保你按照你希望它执行的顺序调用你的代码，因为你似乎是emitting到总线然后设置this.tutor但是你的函数使用this.tutor的值来更新@ 987654328@ 所以this.tutor = response.data; 应该在尝试使用结果之前出现。

您的$on 存在范围问题，因此this 不是指Vue instance 数据而是函数本身：

Bus.$on('updateTutor', function () {
    // Here 'this' refers to the function itself not the Vue instance;
    this.updateTutorProfileForm.profile = this.tutor.profile;
});

改用箭头函数：

Bus.$on('updateTutor', () => {
    // Here 'this' refers to Vue instance;
    this.updateTutorProfileForm.profile = this.tutor.profile;
});

确保您不使用来自CDN 的缩小版Vue 进行开发，否则您将不会在console 中收到警告。

我看不到你是如何定义你的总线的，但它应该只是全局范围内的一个空的 Vue 实例：

var Bus = new Vue();

最后，您的mounted() 钩子正在重复created() 钩子代码，因此不需要它。我的猜测是您只是尝试了一些事情来触发更新，但是您通常可以在 created() 挂钩中对数据进行任何初始化，并且当您需要访问 @987654343 时使用 mounted 挂钩@。见https://vuejs.org/v2/api/#Options-Lifecycle-Hooks