时间戳

首页 > 解决方案 > 对象上的Vue默认选择选项

javascript - 对象上的Vue默认选择选项

问题描述

我知道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"},...]

标签： javascripthtmlcssvue.js

解决方案

您添加附加元素的方法很好，但是您需要匹配的默认状态<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>

推荐阅读