Tengo una aplicación con vue.js y me encuentro con un problema, tengo un selector con opciones en la matriz de options .
Pero cuando muestro la página no hay ningún valor en este selector, básicamente me gustaría que tomara el primer valor base pero no tengo idea de cómo hacerlo.
Antes de hacer eso, también me gustaría ordenar la matriz de opciones contra la matriz ordenada.
Gracias por adelantado.
Código: https://codepen.io/pronicio/pen/eYGJjMP
<div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option"> {{ option }} </option> </select> <span>Selected : {{ selected }}</span> </div> new Vue({ el: '#app', data: { selected: '', options: [ 'A', 'B', 'C'], sorted: [ 'B', 'C'] } });Está utilizando una versión muy antigua de vue en su codepan. Actualizar la versión. Puede agregar la opción seleccionada en el gancho mounted . Si obtiene las opciones por cualquier api. Elija el seleccionado después de obtener la respuesta.
new Vue({ el: '#app', data: { selected: '', options: [ 'A', 'B', 'C'], sorted: [ 'B', 'C', 'A'] }, mounted(){ this.selected = this.options[0] } }); @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; background: rgba(0,0,0,.5); margin: 0; } #app { width: 500px; margin: 0 auto; padding: 10px 20px; background: rgba(255,255,255,.9); } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option"> {{ option }} </option> </select> <span>Selected : {{ selected }}</span> </div>