object 上的 Vue 默認選擇選項

Question

我知道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>

我嘗試添加另一個選項 disabled value=""但它沒有 select 作為默認值。 更像，它沒有顯示。 當我打開下拉菜單時，已經檢查了第一項，但關閉時不顯示。 任何幫助表示贊賞:)

編輯：用戶類型的結構

[{"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"},...]

Answer 1

您添加額外的<option>元素的方法很好，但是您需要匹配 user.usertype 的默認user.usertype ，而不是設置value="" ，這是一個空的 object。 因此，如果您設置屬性:value="{}" ，您將獲得所需的結果。

（在與技術無關的旁注中，您的第一個用戶類型可能應該是“Man”而不是英語中的復數“Men”，或者您可能會更好地使用“male”/“female”）

 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>