ショボ短歌会

selectのoptionを動的にするため、配列をv-forにて表示させているのですが、
左側に空白部分ができてしまいます。
理由と改善方法を教えてください。

ちなみにコードは次のとおりです。
●javascript
var vm = new Vue({
data:{
List:''
},
watch:{
selectken:function(kenCD){
(都道府県コードの値取得時に該当地区の配列を作成しています。)
this.List=[];
myArray=[null,'AAA市','BBB市'];//このような配列を作成。
this.List=myArray;
});
},
},
●HTML
<select v-model="SelectTiku">
<option v-for="option in List" v-bind:value="option">
{{option}}</option>
<option >CCC市</option>///これはテスト用
</select>

画像のとおりの結果になってしまします。
テスト用にhtmlに直接書いた場合はきちんと左寄せに表示されてます。
よろしくお願いします。

「html select optionが左」の質問画像

A 回答 (2件)

簡易的にvue.jsで似たようなサンプルを作ってみましたが問題ありませんね。


CSSを確認してみてはどうでしょうか
    • good
    • 0

開発ツールでHTML構造を確認し、間違った構造になっていないか確認するところから

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!