最近、vue を使用してフォーム データを設定するときに小さな問題を発見しました。vue を使用して選択ドロップダウン ボックスを動的にレンダリングすると、選択ドロップダウン ボックスに空白のバグが発生します。
<template>
<div>
<select name="art-cate" v-model="select">
<option disabled selected style="display: block;">请选择您的科目</option>
<option v-for="(item,index) in arr "
:key="index"
:value="item.name">{
{item.name}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
arr: [{ name: '语文' }, { name: '数学' }, { name: '英语' }],
select:''
}
}
</script>バグは次のとおりです。
明らかに選択されたオプションオプションがありますが、なぜ空白なのですか? 実際、その理由は非常に単純で、たった 1 つの文です: <select> の v-model 変数が空です。
この文が出た途端に、多くの人は v-model コマンドが双方向のデータ フローであり、vue 変数には値がないため、当然選択ボックスは空白であることに気付くかもしれません。
しかし、ここで別の質問が来ます。なぜ他のフォームはこれをしないのでしょうか?
ラジオ ボックス、複数選択ボックス、および入力ボックスにはデフォルトで値がありませんが、値がなく、プレゼンテーションに影響しません。これらは空白にすることができます。<select> タグだけはできません。しましょう。そのため、これを無視して、v-model によってバインドされた変数に値を代入するのを忘れる可能性があり、その結果、select タグが空白になります。
解決策は非常に簡単です。v-model にバインドされた変数を割り当てるだけです。
select:'请选择您的科目' // select是 <select>标签 双向绑定的变量これまでのところ、インシデントは終了し、バグはなくなったようですが、まだ小さな問題があります。
完全に正しい文字列を入力した場合、select はもちろん問題ありませんが、乱雑な文字を入力すると、select は空白のままになります。
select:'乱七八糟的sdsdf'レンダリング:
これは、select によってバインドされた vue 変数がオプションの値に完全に対応している必要があるためです。そうしないと、オプションのテキスト要素が表示されません。
では、「件名を選択してください」と入力した後に表示されるのはなぜですか？私は明らかにこのオプションの値を指定していません。
その理由は次のとおりです。selectのオプション タグで値が指定されていない場合、デフォルトでは、オプションはタグ内のテキスト コンテンツを独自の値として取得します。
すると、「件名を選択してください」と入力しているように見えますが、実際には最初のオプションの値を入力しているため、select タグには最初のオプションのテキスト コンテンツが表示されます。
これは、このバグの別のトリガー方法にもつながります。バックエンドから value undefined を受け取ると、それを select タグでレンダリングします。これにより、<select> タグが空白で表示されるというバグも発生します。オプションの値は未定義です。
しかし同時に、この機能を利用して、最初のオプションの値を手動で空に設定することもできます。そのため、Vue 変数に初期値がなくても、最初のオプションのテキスト コンテンツが表示されます。
<option value="">请选择您的科目</option>
このとき、<select> にバインドされた変数が ' ' であっても、このオプションのテキスト コンテンツを表示できます。
ここまで、vue と select blanks に関するバグについて説明してきました。概要は次のとおりです。
- v-model によってバインドされた <select> タグが空白である理由は、vue 変数がデフォルト値を指定していないためです; 他のフォーム要素は変数のデフォルト値を指定する必要はありません。
- 2 つの解決策があります。 1. 変数のデフォルト値を設定します。 2. デフォルト オプションの値を空の文字列に設定します。
- vue 変数に指定されたデフォルト値を与えても、その値がどのオプションの値にも対応できない場合、<select> タグは依然として空白を表示し、<select> にバインドされた変数の値は特定の値でなければなりませんオプションの値で十分です！このようにしてのみ、<select> タグでオプションのテキスト コンテンツを表示できるからです。
- 値が指定されていないオプションの場合、そのテキスト コンテンツは自動的にこのオプションの値になります。
上記の内容がお役に立てば幸いです. 私のつまずきのコラムにはまだいくつかのフロントエンドの落とし穴があります. フロントエンドの知識は取るに足らない小さなものですが, ずさんなプログラミングはできません.フロントエンドの初心者であるXiaobaiは、一日のほとんどの時間、私のコラムに来て、ピットに落ちるのを防ぎ、高速で速く走ることができます。フロントエンドマスターへの道。