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>

我尝试添加另一个禁用的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"},...]

Answer 1

您添加一个额外的<option>元素的方法很好，但是除了设置value=""之外，您还需要匹配默认状态user.usertype，这是一个空对象。因此，如果您设置属性: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>

Vue对象上的默认选择选项

1 个答案: