メソッド内からデータにアクセスする方法

Question

私は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> 

これは予想通りのデータインスタンスではないため、更新されていません。 vue js doc

すべてのヘルプは高く評価されていますvuejs docに は、私はちょうど方法でながら、これは十分であるアドレス指定を見ることができます。

大切にしてください。 thisがwindowを指しているため

Answer 1

あなたはVueのインスタンスデータを取得するためにVueのインスタンス内thisを参照するには、矢印の機能を使用することはできません、正しいES6の構文は次のとおりです。矢印機能付き

setAccountType(typeId){ 
    this.accountType = typeId 
} 

JSFiddle：https://jsfiddle.net/zxqohh0L/

非矢印ES6関数を使用したJSFiddle：https://jsfiddle.net/zxqohh0L/1/

まだ矢印関数をメソッド内で使用できます自己。