0

我正在尝试使用 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 非常陌生，并试图在旅途中学习！任何帮助深表感谢！

4

1 回答 1

0

好的，首先 abus应该用于组件之间的通信，而不是组件本身，所以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使用from 的缩小版本进行开发，CDN否则您将不会在console.

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

var Bus = new Vue();

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

于 2017-02-01T10:44:43.057 回答