vue--mounted cannot read property 'name' of undefined"
阿新 • • 發佈:2018-12-01
1.鉤子函式
鉤子函式是Windows訊息處理機制的一部分,通過設定“鉤子”,應用程式可以在系統級對所有訊息、事件進行過濾,訪問在正常情況下無法訪問的訊息。鉤子的本質是一段用以處理系統訊息的程式,通過系統呼叫,把它掛入系統。(百度百科)
2.相對於前端來講
對於前端來說,鉤子函式就是指再所有函式執行前,我先執行了的函式,即 鉤住 我感興趣的函式,只要它執行,我就先執行。
3.vue中的mounted
在這發起後端請求,拿回資料,配合路由鉤子做一些事情
型別: Function
詳細:
el被新建立的 vm.el替換,並掛載到例項上去之後呼叫該鉤子。如果root例項掛載了一個文件內元素,當mounted被呼叫時vm.el替換,並掛載到例項上去之後呼叫該鉤子。如果root例項掛載了一個文件內元素,當mounted被呼叫時vm.el 也在文件內
該鉤子在伺服器端渲染期間不被呼叫。
4.程式碼例項
new Vue({ el: '#app', data: { totalMoney: 0, productList: [] }, filters: { }, mounted: function() { //這個是鉤子函式 //如果cartView函式要執行,必須先執行鉤子函式 //這個鉤子函式完成了對cratView函式的呼叫 //應該注意的是,使用mounted 並不能保證鉤子函式中的 this.$el 在 document 中。為此還應該引入 Vue.nextTick/vm.$nextTick this.$nextTick(function () { this.cartView() }) }) }, methods: { //這個是要執行的函式 cartView: function() { var _this = this; this.$http.get("data/cartData.json", {"id": 123}).then(function(res) { _this.productList = res.body.result.list; _this.totalMoney = res.body.result.totalMoney; }); } } } });