12

vue.js は初めてです。angularjs アプリの移行を開始しています。vue cli を使用して、新しい simple-webpack プロジェクトを生成しています。これにより、新しい webpack+vueLoader プロジェクトが作成されます。すべてが順調に進みましたが、今問題があります。@click イベントでデータを変更したいのですが、オブジェクトにアクセスできません。「これ」はデータ インスタンスではありません。

ここで何が欠けていますか？

<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

どんな助けでも大歓迎です。

敬具。

4

1 に答える 1

22

thisVue インスタンスのデータを取得するためにアロー関数を使用して Vue インスタンス内を参照することはできません。これthisはwindow、正しい ES6 構文が次のとおりであるためです。

 setAccountType(typeId){
   this.accountType = typeId
 }

アロー関数を使用した JSFiddle: https://jsfiddle.net/zxqohh0L/

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

メソッド自体の中でアロー関数を使用することもできます。

于 2016-12-13T11:19:36.320 に答える