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

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 用于 this.updateTutorProfileForm.profile 的更新，因此 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() 挂钩中对数据进行任何初始化，并在需要访问时使用 mounted 挂钩到 this.$el。参见 https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

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

Updating custom component's form after getting a response

vue.js

laravel-spark