1

boa tarde a todos, tudo bem com vocês? Seguinte, estou listando uns cursos com v-for e ele vai de boa, porém, option precisa ser selecionado e gostaria que o primeiro item do select já aparecesse selecionado, para indicar ao cliente melhor...ele funciona, mas tá tudo em branco...não tá errado, só tá feio, como faço para que o option apareça de primeira?? Obrigado a todos!! Horácio

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

3 Respostas 3

3

A seção Basic Usage > Select da documentação aborda este assunto:

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

Tradução livre:

Se o valor inicial da expressão no v-model não coincidir com nenhum dos <option>, o elemento <select> será renderizado em um estado não selecionado.

Para isto basta dar um valor válido ao v-model. Exemplo:

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>

<div id="app">
  <select v-model="selecionado">
    <option v-for="opcao in opcoes" :value="opcao">
      {{ opcao }}
    </option>
  </select>
</app>

1

Tente com o código abaixo.

A ideia é verificar se o index do item é 0. Se for, marca a option como 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>
0

No final do código onde você termina de carregar a lista, pegue o primeiro elemento da lista

this.cursos = array[0]

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .