如何从方法内部访问数据答案

【问题标题】：how to access data from inside a method如何从方法内部访问数据
【发布时间】：2017-04-28 10:12:48
【问题描述】：

我是 vue.js 的新手。我开始迁移我的 angularjs 应用程序。我正在使用 vue cli 生成一个新的 simple-webpack 项目。这将创建一个新的 webpack+vueLoader 项目。一切都很顺利，但现在我有一个问题。在我的@click 事件中，我想更改我的数据，但我无法访问该对象。 'this' 不是数据实例。

我在这里错过了什么？

<template>
    <input type="radio" name="account-type" @click="setAccountType(item.id)"/><span>{{item.name}}</span>
</template>
<script>
  export default {
     data() {
        return { accountType: null
     },
     methods: { setAccountType: (typeId) => this.accountType = typeId
  }
</script>

这不是预期的数据实例，因此 ui 未更新。在 vuejs doc 中，我可以看到在方法中解决这个问题就足够了： vue js doc

感谢任何帮助。

亲切的问候。

【问题讨论】：

标签： vue.js vue-loader

【解决方案1】：

您不能使用箭头函数在 Vue 实例中引用 this 来获取 Vue 实例数据，因为 this 引用 window，正确的 ES6 语法是：

 setAccountType(typeId){
   this.accountType = typeId
 }

带箭头函数的JSFiddle：https://jsfiddle.net/zxqohh0L/

带有非箭头 ES6 函数的 JSFiddle：https://jsfiddle.net/zxqohh0L/1/

您仍然可以在方法本身内部使用箭头函数。

【讨论】：

出色的答案。非常感谢您的努力
很好的解释，我正在挖掘使用箭头函数访问函数内部的数据。您的回答确实解决了我的问题，也有助于更好地理解。
非常感谢！在这上面浪费了两个小时。这让我发疯了。
使用箭头函数会完全破坏数据绑定，这太糟糕了，而且您也不会收到有意义的错误消息。你会认为 Vue 实例会检查这一点并发出警告。
谢谢。正如你所说，这不起作用，因为我使用的是箭头函数。