web-dev-qa-db-ja.com

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

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

これは期待どおりのデータインスタンスではないため、更新されません。 vuejs docでは、メソッドでこれに対処するだけで十分です： vue js doc

どんな助けでもありがたいです。

敬具。

vue.jsvue-loader
11
Gal Ziv

Vue instance to get Vue instance data for thisのため、アロー関数を使用してthisを参照することはできませんwindowの場合、正しいES6構文は次のとおりです。

 setAccountType(typeId){
   this.accountType = typeId
 }

Arrow関数を含むJSFiddle： https://jsfiddle.net/zxqohh0L/

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

メソッド自体の内部でも矢印関数を使用できます。

21
craig_h