leave first selected item selected

Navigation
1
Good afternoon to everyone, how are you? Next, I'm listing some courses with v-for and it's a good one, however, option needs to be selected and I'd like the first select item already selected to indicate to the client better ... it works, but it's all blank ... it's not wrong, it's just ugly, how do I make the option appear first? Thank you all!! Horacio 

<select v-model="cursos" id="cursos" class="form-control" name="cursos">
  <option v-for="item in ListaDeCursos" :value="item.from">
     {{item.from}} 
  </option>
</select>
    
asked by anonymous 13.09.2018 / 19:55

3 answers

3

The Basic Usage > Select section of the documentation addresses this issue:

  

If the initial value of your v-model expression does not match any of the options, the element will render in an unselected state

Free translation:

  

If the initial value of the expression in v-model does not match any of <option> , the <select> element will render in an unselected state.

For this, just give a valid value to v-model . Example: 

new Vue({
  el: '#app',
  data: {
    opcoes: ['Opção 1', 'Opção 2', 'Opção 3'],
    selecionado: 'Opção 2'
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script><divid="app">
  <select v-model="selecionado">
    <option v-for="opcao in opcoes" :value="opcao">
      {{ opcao }}
    </option>
  </select>
</app>
    
13.09.2018 / 20:39
1

Please try the code below.

The idea is to check if the index of the item is 0. If it is, check the option as selected. 

<select v-model="cursos" id="cursos" class="form-control" name="cursos">
  <option v-for="(item, index) in ListaDeCursos" :value="item.from" :selected="index == 0">
     {{item.from}} 
  </option>
</select>
    
13.09.2018 / 20:05
0

At the end of the code where you finish loading the list, grab the first element from the list 

this.cursos = array[0]
    
14.09.2018 / 03:13
SQL command too slow remove class after 1 with Jquery