在加載VueJs 2組件後運行功能

一旦組件安裝完成後如何獲取數據？
我開始我的vue實例，然後加載組件，組件模板加載正常，但掛載的函數調用永遠不會運行，因此stats對象保持爲空，從而導致需要數據的組件/模板中出現錯誤。在加載VueJs 2組件後運行功能

那麼如何在組件加載上運行某個函數呢？

對於它的價值......我想調用的函數將全部生成REST請求，但每個組件都將運行不同的請求。

Vue.component('homepage', require('./components/Homepage.vue'), { 
    props: ["stats"], 
    mounted: function() { 
    this.fetchEvents(); 
    console.log('afterwards'); 
    }, 
    data: { 
    loading: true, 
    stats: {} 
    }, 
    methods: { 
    fetchEvents: function() { 
     this.$http.get('home/data').then(function(response) { 
     this.stats = response.body; 
     this.loading = false; 
     }, function(error) { 
     console.log(error); 
     }); 
    } 
    } 
}); 

const vue = new Vue({ 
    el: '#main', 
    mounted: function() { 
    console.log('main mounted'); 
    } 
});

來源

2016-12-13 twigg

您將3個參數傳遞給您的組件，但'Vue.component'只接受2個參數，id和定義：https://vuejs.org/v2/api/#Vue-component –

@craig_h ahh我看到，我正在按照組件https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js中的Laravel慣例加載。那麼我怎麼會在組件上調用？ – twigg

用你的組件加載require是可以的，但是你的視圖模型（基本上你添加的所有代碼作爲第三個參數）應該在'Homepage.vue'中。看看[單個文件組件]（https://vuejs.org/v2/guide/single-file-components.html），看看它們是如何工作的。 –

您已經把所有的初始化的東西到mounted做精。您的組件沒有刷新的原因是可能是因爲this結合，解釋如下：

在你fetchEvents功能，您$http成功處理程序提供了一個迴應，您正試圖分配給this.stats。但它失敗了，因爲this指向匿名函數範圍而不是Vue組件。

爲了解決這個問題，你可以使用箭頭功能，如下圖所示：

fetchEvents: function() { 
    this.$http.get('home/data').then(response => { 
    this.stats = response.body; 
    this.loading = false; 
    }, error => { 
    console.log(error); 
    }); 
}

箭頭的功能不會產生自己的範圍或this內。如果在上面顯示的箭頭函數中使用this，它仍然指向Vue組件，因此您的組件將更新其數據。

注意：即使錯誤處理程序需要使用箭頭函數，以便您可以使用this（Vue組件）進行任何錯誤記錄。

來源

2016-12-13 15:54:16 Mani

裝載：在組件中似乎根本沒有觸發，我曾嘗試做一個簡單的console.log甚至另一個函數調用警報，但沒有一個觸發。看起來，組件加載時它不會在掛載的函數列表中調用任何東西。 – twigg

你可以檢查這個jsFiddle的例子：https://jsfiddle.net/mani04/0gsq2ez1/ - 這裏的'掛載'被觸發，你可以在控制檯中看到消息。你確定你正在使用Vue 2.x最新版本嗎？另外，我不知道你想用'require（'./ components/Homepage.vue'）'來做什麼，我從來沒有遇到過這種類型的用法或要求。 – Mani

我只是簡單地遵循Laravel中的代碼，以及他們如何調用組件，請看看這裏：https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js – twigg

在加載VueJs 2組件後運行功能

回答

相關問題