Vue.Jsで計算されたプロパティでパラメータを渡すことはできますか

Question

Vue.Jsで計算されたプロパティでパラメータを渡すことが可能です計算を使ってゲッター/セッターがあるときは、パラメータをとり変数に代入することができます。ここdocumentationからのように：

// ... 
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 Uncaught TypeError: fullName is not a function(…)

は、私はそのような場合のための方法を使用する必要がありますか？

Answer 1

あなたが使用する必要があります方法：

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

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

P.S.計算されたプロパティとメソッドの違いは、計算されたプロパティがキャッシュされ、その依存関係が変更された場合にのみ変更されるということです。そのため、そこでパラメータを渡すことができません。メソッドは、呼び出すたびに評価されます。

Answer 2

私はあなたが達成しようとしていることは十分にはわかりませんが、計算された代わりにメソッドを使用すると完全にうまくいくように見えます！

Answer 3

メソッドを使用することはできますが、メソッドの代わりに計算されたプロパティを使用することをお勧めします。データが変更されていないか、外部効果がない場合

あなたが計算された特性のために、このような引数を渡すことができ

（ここで文書化されますが、メンテナによって示唆されていないが、覚えていない）：

computed: { 
    fullName: function() { 
     var vm = this; 
     return function (salut) { 
      return salut + ' ' + vm.firstName + ' ' + vm.lastName; 
     }; 
    } 
} 

EDITを：このソリューションを使用しないでください、それだけでなくて、コードを複雑にあらゆる利益。

Answer 4

paramsを使用する方法はあります。上記の答えと同様に、あなたの例では実行が非常に軽いのでメソッドを使うのが最善です。何千人を扱う場合は、メモリのため、これを使用して、WATCHOUT

：

data() { 
    return { 
     fullNameCache:{} 
    }; 
} 

methods: { 
    fullName(salut) { 
     if (!this.fullNameCache[salut]) { 
      this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName; 
     } 
     return this.fullNameCache[salut]; 
    } 
} 

注：

は参考のために、方法が複雑でコストが高い状況で、あなたはとてもような結果をキャッシュすることができます

Answer 5

技術的に言えば、vuexのゲッター関数にパラメーターを渡すのと同じ方法で、計算された関数にパラメーターを渡すことができます。このような関数は、関数を返す関数です。例えば

、店舗のゲッターに：

{ 
    itemById: function(state) { 
    return (id) => state.itemPool[id]; 
    } 
} 

このゲッターは、コンポーネントの計算機能にマッピングすることができます。

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]) 
} 

そして、私たちは私たちの中で、この計算された機能を使用することができます次のようなテンプレートを使用します。

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div> 

計算されたmeth odはパラメータをとります。

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]), 
    descriptionById: function() { 
    return (id) => this.itemById(id).description; 
    } 
} 

そして、我々のテンプレートでそれを使用します。

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div> 

これは言われて、私はそれがVueので物事の正しい方法だと、ここでは言いませんよ。

しかし、特定のIDを持つアイテムが店舗で変更された場合、ビューはそのアイテムの新しいプロパティでコンテンツを自動的に更新します（バインディングはうまく機能しているようです）。