Vue default selected option on object

Question

I know that the v-model data should be the same as the default option but what I do when I have things setup like this:

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>

I tried adding another option disabled value="" but it didn't select it as default. more like, it doesn't show. when I open up the dropdown menu, the first item is checked already but it does not show when its closed. any help is appreciated :)

Edit: Structure of 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"},...]

its an empty object just for storing data, couldve as well used an array. Edit: Oh usertypeS, yes wait a sec — Coderz9
– Coderz9, Commented Sep 19, 2019 at 14:00
But then of course your v-for loop will produce no output. What do you want the list to contain when user.usertype is unset? It's not very clear from the question. — Sarah Groß
– Sarah Groß, Commented Sep 19, 2019 at 14:02
No i just spelled them poorly, usertypeS is a prop , usertype is but an empty object to store the chosen option. It does produce a dropdown, but no selected default option works — Coderz9
– Coderz9, Commented Sep 19, 2019 at 14:04
Just for clarification: I'd like to have a default value upon visiting the page. Right now, there is none. Its just a blank field. — Coderz9
– Coderz9, Commented Sep 19, 2019 at 14:06

Sarah Groß · Accepted Answer · 2019-09-19 14:12:54Z

2

Your approach of adding an additional <option> element was good, but instead of setting value="", you need to match the default state of user.usertype, which is an empty object. So if you set the attribute :value="{}", you'll get the desired result.

(on a sidenote unrelated to the technics, your first usertype should probably be "Man" instead of plural "Men" in English, or maybe you'd be even better of with "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>

edited Sep 19, 2019 at 14:12

answered Sep 19, 2019 at 14:08

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coderz9 Over a year ago

^^, on a last note: What about an array? I get the gist of an object now, but how would you approach this matter if it were an array?

Sarah Groß Over a year ago

Just use an empty array: :value="[]"

Collectives™ on Stack Overflow

Vue default selected option on object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related