[解決済み] Vueコンポーネントのpropのデフォルト値と、ユーザーがpropを設定しなかったかどうかを確認する方法は?
2022-04-21 07:21:52
質問
1.
Vue 2でコンポーネントのプロップにデフォルト値を設定するにはどうすればよいですか?例えば、単純な
movies
コンポーネントは、このように使用することができます。
<movies year="2016"><movies>
Vue.component('movies', {
props: ['year'],
template: '#movies-template',
...
}
しかし、もしユーザーが
year
:
<movies></movies>
を指定すると、コンポーネントは
year
プロパティを指定します。
2. また、ユーザがpropを設定しなかったかどうかを確認する最善の方法は何でしょうか?これは良い方法なのでしょうか。
if (this.year != null) {
// do something
}
とか、これかな。
if (!this.year) {
// do something
}
?
どのように解決するのか?
Vue
を指定することで、デフォルトの
prop
価値と
type
を直接、propsをオブジェクトにすることで、(参照。
https://vuejs.org/guide/components.html#Prop-Validation
):
props: {
year: {
default: 2016,
type: Number
}
}
もし間違った型が渡されたら、エラーを投げてコンソールにログを残します。
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
[解決済み] テスト
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] Vue.js - ネストされたデータを適切に監視する方法
-
[解決済み] JavaScriptのFor.Inループ - キーと値のペア
-
[解決済み】vuejs 子コンポーネントから親データを更新する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
JavaScriptの配列共通メソッド解説
-
Vueのフィルタの説明
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。