v-modelデータはデフォルトのオプションと同じである必要があることはわかっていますが、次のように設定したときに何をしますか。
data: function() {
return {
user: {
usertype: {},
}
}
<select v-model="user.usertype" class="btn btn-secondary d-flex header-input">
<option
v-for="(usertype, index) in usertypes"
:key="index"
:value="{value: usertype['short_desc_'+locale], max_user: usertype['max_user']}"
>{{usertype['short_desc_'+locale]}}</option>
無効にしvalue=""た別のオプションを追加しようとしましたが、デフォルトとして選択されませんでした。もっと似ている、それは表示されません。ドロップダウンメニューを開くと、最初の項目はすでにチェックされていますが、閉じたときに表示されません。どんな助けでも大歓迎です:)
編集：ユーザータイプの構造
[{"id":1,"short_desc_de":"Mann","short_desc_en":"Men","min_user":1,"max_user":1,"created_at":"2019-09-19 08:07:06","updated_at":"2019-09-19 08:07:06"},{"id":2,"short_desc_de":"Frau","short_desc_en":"Woman","min_user":1,"max_user":1,"created_at":"2019-09-19 08:07:06","updated_at":"2019-09-19 08:07:06"},...]
<option>要素を追加するというアプローチは良かったのですが、を設定する代わりにvalue=""、デフォルトの状態でuser.usertypeある空のオブジェクトに一致させる必要があります。したがって、属性を設定すると:value="{}"、目的の結果が得られます。
（技術とは関係のない補足として、最初のユーザータイプは英語の複数形の「男性」ではなく「男性」である必要があります。そうでない場合は、「男性」/「女性」の方が適している可能性があります）
new Vue({
el: '#app',
data: {
user: {
usertype: {}
},
usertypes: [{"id":1,"short_desc_de":"Mann","short_desc_en":"Men","min_user":1,"max_user":1,"created_at":"2019-09-19 08:07:06","updated_at":"2019-09-19 08:07:06"},{"id":2,"short_desc_de":"Frau","short_desc_en":"Woman","min_user":1,"max_user":1,"created_at":"2019-09-19 08:07:06","updated_at":"2019-09-19 08:07:06"}],
locale: 'en'
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="user.usertype" class="btn btn-secondary d-flex header-input">
<option v-if="!Object.keys(user.usertype).length" :value="{}" disabled>please choose one</option>
<option
v-for="(usertype, index) in usertypes"
:key="index"
:value="{value: usertype['short_desc_'+locale], max_user: usertype['max_user']}"
>{{usertype['short_desc_'+locale]}}</option>
</select>
<p>{{user.usertype}}</p>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加