Vue.js 2: 在组件挂载前通过 http.get 设置一个 prop 值

Question

我想从我的服务器获取数据以填充 vuejs 中的道具或数据。

基本上我需要将数据作为组件的参数传递。

    data() {
        return {
            recursos_data : [
                    { id: 'a', title: 'Room A' },
                    { id: 'b', title: 'Room B', eventColor: 'green' },
                    { id: 'c', title: 'Room C', eventColor: 'orange' },
                    { id: 'd', title: 'Room D', eventColor: 'red' }
                ],
            meus_recursos: []
        }
    },
    methods: {
        getResources: function() {
            var self = this;
            Vue.http.get('/admin/getResources').then((response) => {
                _.forEach(response.data.resources,function(item){
                    self.meus_recursos.push(item);
                });
                console.log(self.meus_recursos);
                return self.meus_recursos;
            });
        },
    },
    mounted() {
        const cal = $(this.$el),
            self = this;

        self.getResources();

        cal.fullCalendar({
            header: this.header,
            defaultView: this.defaultView,
            editable: this.editable,
            selectable: this.selectable,
            selectHelper: this.selectHelper,
            aspectRatio: 2,
            slotDuration: '00:10:00',
            timeFormat: 'HH:mm',
            eventSources: self.eventSources,
            events: self.events,
            resources: self.recursos_data,
            fixedWeekCount: false,
            firstDay: 1
         });
     }

我需要从 url 获取数据，但我不知道如何让它工作。我已经尝试过 computed、props 和 method，但它们不起作用...

我需要从服务器返回的值中获取数据，而不是从变量 recursos_data 中获取数据。如何在 vuejs 中实现这一目标？

Answer 1

答案是：你不能。

你需要转变观念。每个组件都是反应性的，应该根据它的模型显示自己。从服务器下载数据时，您不能 "stop" 该组件。在您的这种情况下，我看到了 2 个解决方案：

通过显示一些 throbber 或只是空列表来处理 "data not ready" 状态。无论您是在内部更改数据还是从父组件更改道具都没有关系。您可以将 dataReady 之类的标志添加到数据中，并在 ajax 完成后将其设置为 true。在您的模板中，您将有一些 if 语句使用此标志来显示 throbber 或数据。
从其父组件对其进行控制，只有在数据准备好后才显示该组件

没有其他办法。

Answer 2

我想你的问题是 fullCalendar 和你的异步方法之间的某种交互。您想在返回数据后初始化 fullCalendar。

如何从您的 getResources 方法中返回承诺？

methods: {
    getResources: function() {
        var self = this;
        return Vue.http.get('/admin/getResources').then((response) => {
            _.forEach(response.data.resources,function(item){
                self.meus_recursos.push(item);
            });
        });
    },
},

mounted() {
    const cal = $(this.$el),
        self = this;

    self.getResources().then(() => {
        cal.fullCalendar({
            header: this.header,
            defaultView: this.defaultView,
            editable: this.editable,
            selectable: this.selectable,
            selectHelper: this.selectHelper,
            aspectRatio: 2,
            slotDuration: '00:10:00',
            timeFormat: 'HH:mm',
            eventSources: self.eventSources,
            events: self.events,
            resources: self.meus_recursos,
            fixedWeekCount: false,
            firstDay: 1
         });
    });
 }

或者，您可以在 getResources 之后立即调用 fullCalendar。

getResources: function() {
    var self = this;
    return Vue.http.get('/admin/getResources')
        .then((response) => {
            _.forEach(response.data.resources,function(item){
                self.meus_recursos.push(item);
        })
        .then(() => {
            $(this.$el).fullCalendar({
                header: this.header,
                defaultView: this.defaultView,
                editable: this.editable,
                selectable: this.selectable,
                selectHelper: this.selectHelper,
                aspectRatio: 2,
                slotDuration: '00:10:00',
                timeFormat: 'HH:mm',
                eventSources: self.eventSources,
                events: self.events,
                resources: self.meus_recursos,
                fixedWeekCount: false,
                firstDay: 1
             });
        })
    });
}

或者，在检索数据之前甚至无法安装组件。

Vue.js 2: 在组件挂载前通过 http.get 设置一个 prop 值

Vue.js 2: set a prop value via http.get before the component is mounted

javascript

vue.js

vue-component

vuejs2