爲什麼vue js沒有設置數據？

我正在使用Vue js和網絡包。 Vue沒有設置this.title，只渲染「標題」和項目。當在console.log上顯示「this.title」時，此打印「未定義」爲什麼vue js沒有設置數據？

我有這段代碼。

<template> 
    <div> 
     <h1>{{title}}</h1> 
     <li v-for="i in items"> 
      {{ i.name }} 
     </li> 
    </div> 
</template> 
<script> 
    export default { 
     data:() => { 
      return { 
      title: "Title", 
      items: [ 
       {name: "item 1"}, 
       {name: "item 2"}, 
       {name: "item 3"}, 
       {name: "item 4"}    ] 
      } 
     }, 
     created:() => { 
      console.log(this.artists) 
      this.title = "New title" 
     } 
    } 
</script>

來源

2017-03-17 Rick Hunter

避免使用箭頭函數來定義生命週期方法。

所有生命週期掛鉤都會自動將其上下文綁定到實例，以便您可以訪問數據，計算屬性和方法。 這意味着您不應該使用箭頭函數來定義生命週期方法（例如，created：（）=> this.fetchTodos（））。原因是箭頭函數會綁定父上下文，所以這不會像您期望的那樣是Vue實例，並且this.fetchTodos將會是未定義的。

https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

new Vue({ 
    el: '#app', 
    data: { 
     title: "Title" 
    }, 
    // NOT WORK 
    /* 
    created:() => { 
     console.log(this) 
     this.title = "New title" 
    } 
    */ 
    // WORKS 
    created() { 
     console.log(this) 
     this.title = "New title" 
    } 
})

https://jsfiddle.net/choasia/cLs4d5cp/1/

來源

2017-03-17 00:29:33 choasia

這是因爲() =>分配this到的範圍的父this。

由於您的腳本的父級沒有定義this，它將在您的函數中未定義。

來源

2017-03-17 00:33:16 d3L

vue將您的變量代理爲vue instace。示例方法，數據，計算以及使用（）=>（箭頭語法）時，您的這不等於vue實例。你應該使用簡單的功能。這有點神奇，因爲你在後臺做什麼。

來源

2018-01-21 18:29:55

爲什麼vue js沒有設置數據？

回答

相關問題