[Vuejs]-Vue.js Select always first value selected if value object

by

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

👤Eric

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
  },
})
👤Oli Crt

Leave a comment