Question

我正在尝试使用Laravel Spark在自定义组件中加载Tutor的配置文件。无论我输入什么都没有问题，它会更新，但加载时总是为空。

组件本身如下：

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;
});

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

我无法看到您如何定义总线，但它应该只是全局范围内的空Vue实例：

var Bus = new Vue();

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

获得回复后更新自定义组件的表单

1 个答案: