Vuejs Arrow関数が2番目の文をトリガーしない

Question

Vuejsコンポーネントのメソッドセクション内でラムダ式を使用しています。

この例は、 です。私はalertyou()をトリガーし、アラートを取得し、「OK」をクリックします。その後、私はthis.activatedと表示されるvue開発ツールではtrueになります。

export default { 
    name: 'HelloWorld', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
     activated: false 
    } 
    }, 
    methods: { 
     alertme:() => { alert('Clicked'); this.activated = false; }, 
     alertyou() { 
     alert('Alert You'); 
     this.activated = true 
     } 
    } 
} 

ただし、alertmeラムダをトリガーするボタンをクリックすると、警告メッセージが表示されたら、[いいえ]をクリックします。しかし、その後、これは有効です。

ここで何が起こっているのは、これがラムダの制限ですか？ラムダごとに1つのステートメントだけトリガーできますか？それとも警報が発せられたら、これは範囲を扱わなければならないのでしょうか？

Answer 1

これはラムダの制限ですか？ラムダごとに1つのステートメントだけトリガーできますか？それとも警報が発せられたら、これは範囲を扱わなければならないのでしょうか？

どちらもありません。

矢印機能は、矢印機能が作成されたときのコンテキストにthisをバインドしたままにします。この場合、thisはvueインスタンスではありません。おそらくwindow

functionキーワード（またはES6オブジェクト略語スタイル）を使用してオブジェクトに宣言された関数は、通常、関数が宣言されているオブジェクトにバインドされているthisになります。あなたはthis.activatedあなたがalertmeメソッドを宣言するalertyouと同じ構文を使用したいと思う

alertme alertyouではなく、にアクセスすることができます理由です

。

Answer 2

alertme:() => { alert('Clicked'); this.activated = false; }からalertme() { alert('Clicked'); this.activated = false; }に変更してください。 here