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

我需要从网址获取数据，但我不知道如何使其工作。我尝试过计算机，道具和方法，但它们不起作用......

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

Answer 1

我希望您的问题是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
         });
    });
 }

或者，您可以在fullCalendar之后立即致电getResources。

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

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

Answer 2

答案是：你不能。

你需要改变思维方式。每个组件都是被动的，应该根据它的模型显示自己。从服务器下载数据时，不能“停止”组件。在这种情况下我会看到两种解决方案：

通过显示一些throbber或只是空列表来处理“数据未就绪”状态。如果您正在更改内部数据或从父组件更改道具，则无关紧要。您可以在数据中添加dataReady之类的标记，并在ajax完成后将其设置为true。在你的模板中，你将有一些if语句使用这个标志来显示throbber或数据。
从其父组件控制它，并仅在数据准备好后才显示组件。

别无他法。

Vue.js 2：在安装组件之前通过http.get设置prop值

2 个答案: