为什么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没有设置数据？

回答

相关问题