[解決済み】Vue.Jsの計算されたプロパティでパラメータを渡すことはできますか?
質問
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
関連
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】 \u003C とは何ですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools