☰

Vue.Jsの計算プロパティにパラメータを渡すことはできますか？質問する

tag-icon • tag-icon javascript vue.js vuejs2
Vue.Jsの計算プロパティにパラメータを渡すことはできますか？質問する

Vue.Jsの計算プロパティでパラメータを渡すことは可能ですか？計算プロパティを使用するゲッター/セッターがある場合、パラメータを取得して変数に割り当てることができます。ここのようにドキュメンテーション:

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    
  }
}

計算プロパティは引数を受け取り、目的の出力を返します。ただし、これを実行すると、次のエラーが発生します。

vue.common.js:2250 キャッチされない TypeError: fullName は関数ではありません(…)

このような場合にはメソッドを使用するべきでしょうか?

ベストアンサー1

おそらくあなたはメソッドを使いたいでしょう

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

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

詳しい説明

技術的には、次のようなパラメータを持つ計算プロパティを使用できます。

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

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

計算プロパティとメソッドの違いは、計算プロパティはキャッシュされ、依存関係が変更された場合にのみ変更される点です。メソッドは呼び出されるたびに評価されます。

パラメータが必要な場合、そのような場合にはメソッドよりも計算プロパティ関数を使用する利点は通常ありません。パラメータ化されたゲッター関数を Vue インスタンスにバインドできますが、キャッシュが失われるため、実際にはメリットはありません。実際、リアクティブ性が損なわれる可能性があります (AFAIU)。これについては、Vue のドキュメントで詳しく読むことができます。https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

唯一役に立つのは、ゲッターを使用する必要があり、それをパラメータ化する必要がある場合です。たとえば、この状況はVuexで発生します。Vuex では、これがストアからパラメータ化された結果を同期的に取得する唯一の方法です (アクションは非同期です)。したがって、このアプローチは、ゲッターの公式 Vuex ドキュメントに記載されています。https://vuex.vuejs.org/guide/getters.html#メソッドスタイルアクセス

おすすめ記事