Vue.js Select always first value selected if value object

Question

How to selected first element from Select if value object ? I have array two level. I need an object in order to pass two parameters (name, value)

<select  v-model="getSelectLanguage" class="uk-select">
   <option :value="sel" v-for="(sel,index) in serviclevel.selectlanguage" >
                                {{sel.label}} 
   </option>
</select>

Example data

Services_level_2: [{
    head_option: "Lorem Ipsum is simply dummy text of the printing and typesetting ",    
    selectlanguage: [{
        label: "1",
        price: 1
      },
      {
        label: "2",
        price: 1.5
      },
      {
        label: "3",
        price: 2.3
      },
      {
        label: "4",
        price: 3.2
      },
      {
        label: "5+",
        price: 4
      }
    ]

  }]

Example demo

Oli Crt · Accepted Answer · 2018-10-16 09:37:45Z

2

You could initialize selected to the desired default option.

const options = [
   {
      text: 'One',
      value: 'A'
   },
   {
      text: 'Two',
      value: 'B'
   }, 
   {
      text: 'Three',
      value: 'C'
   }
];


new Vue({
  el: '#my-inputs',
  data: {
    selected: options[0],
    options: options
  },
})

edited Oct 16, 2018 at 9:37

answered Oct 16, 2018 at 9:32

Oli Crt

1,2031 gold badge12 silver badges15 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 05:54:10Z

2

If you want the first item to always be selected you can add :selected="index === 0" to the option element.

jsfiddle

Edit

https://v2.vuejs.org/v2/guide/forms.html#Basic-Usage

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

...

If the initial value of your v-model expression does not match any of the options, the element will render in an “unselected” state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.

In short, if selected doesn't match an option, it will show the unselected state.

updated fiddle

edited Jul 15, 2022 at 5:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 15, 2018 at 19:20

Eric

665 bronze badges

1 Comment

Pavel8289 Over a year ago

I tried it, but it does not work for me. Then I will understand further

Collectives™ on Stack Overflow

Vue.js Select always first value selected if value object

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related