1. 程式人生 > >vue--mounted cannot read property 'name' of undefined"

vue--mounted cannot read property 'name' of undefined"

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