BinaryDevelop
  1. ホーム
  2. javascript

vue computedでarrow関数を使ってもうまくいかない

2023-09-16 05:06:12

質問

Vueを学習中ですが、computedプロパティでarrow関数を使用する際に問題に直面しました。

私の元のコードは正常に動作します（以下のスニペットを参照してください）。 

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed: function () {
    	return {red: this.turnRed}
    },
    switchGreen: function () {
    	return {green: this.turnGreen}
    },
    switchBlue: function () {
    	return {blue: this.turnBlue}
    }
  }
});

.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>

しかし、computedプロパティのメソッドを変更しても、色は変わりません（ただし、turnRedの値は正常にtrueとfalseの間を切り替えています）。

これは私のコードです。 

computed:{
    switchRed: () => {
        return {red: this.turnRed}
    },
    switchGreen: () => {
        return {green: this.turnGreen}
    },
    switchBlue: () => {
        return {blue: this.turnBlue}
    }
}

間違った構文を使っていませんか？

どのように解決するのですか？

矢印関数がバインドされないため、このエラーに直面しました。 this を計算されたプロパティを定義しているvueのインスタンスにバインドしないからです。同じことが、もしあなたが methods を矢印関数で定義しても同じです。

インスタンスプロパティやコールバックで矢印関数を使わないでください（例えば vm.$watch('a', newVal => this.myMethod())) . 矢印関数は親のコンテキストにバインドされるため、これは期待するようなVueインスタンスにはならず this.myMethod は未定義になります。

あなたはそれについて読むことができます はこちら .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します