1. ホーム
  2. ジャバスクリプト

[解決済み】Vue.Jsの計算されたプロパティでパラメータを渡すことはできますか?

2022-03-29 01:39:07

質問

Vue.Jsのcomputedプロパティでパラメータを渡すことは可能でしょうか?私は、ゲッター/セッターがコンピューティングを使用している場合、それらはパラメータを取り、変数に代入することができます。 ドキュメント :

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

これも可能でしょうか。

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

ここで、computedプロパティは引数を取り、希望する出力を返します。しかし、これを試すと、次のようなエラーが発生します。

vue.common.js:2250 Uncaught TypeError: fullName is not a function(...)

このような場合、メソッドを使用した方が良いのでしょうか?

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

おそらく、ある方法を使いたいのでしょう。

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}


長い説明

技術的には、このようにパラメータで計算されたプロパティを使用することができます。

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

(ありがとうございます Unirgy のベースコードです)。

コンピューテッドプロパティとメソッドの違いは、以下の通りです。 計算されたプロパティはキャッシュされる であり、依存関係が変化したときのみ変化します。A メソッドは、呼び出されるたびに評価されます。 .

パラメータが必要な場合、通常、このようなケースでメソッドではなく計算されたプロパティ関数を使用するメリットはないでしょう。Vueインスタンスにバインドされたパラメータ付きのゲッター関数を持つことができますが、キャッシュを失うので、実際には何の利益もありませんし、実際、反応性を壊す可能性があります(AFAIU)。これについてはVueのドキュメントを参照してください。 https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

という場合のみ有効な場面です。 しなければならない はゲッターを使用し、それをパラメトリックにする必要があります。例えば、このような状況は Vuex . Vuexでは、これはストアからパラメトリックな結果を同期的に取得する唯一の方法です(アクションは非同期)。そのため、この方法はVuexの公式ドキュメントでゲッターのためにリストアップされています。 https://vuex.vuejs.org/guide/getters.html#method-style-access