Estoy tratando de hacer que la primera opción de selección sea predeterminada, por lo tanto, se muestra de inmediato cuando se carga la página. Pensé que, dado que v-bind:selected es un atributo booleano, podría usar algo simple como index === 0 para seleccionar el primero de forma predeterminada, pero esto no parece funcionar y no hay ninguna opción seleccionada en la carga de la página. He depurado y los índices se incrementan normalmente, no pasa nada extraño allí. ¿Hay algo tonto que me estoy perdiendo tal vez? selectedThingId es una referencia con un valor predeterminado de cero. ¡También busqué en el html cambiando este número y nunca se seleccionó nada!
Aquí está el código de la plantilla:
<select name="select" id="select" v-model="selectedThingId" @change="onChangeFunction"> <option v-for="(thing, index) in things" :value="thing.id" :key="thing.id" :selected="index === 0" > {{ thing }} </option> </select>Intente configurar el identificador de cosa selectedThingId en el gancho onMounted :
const { ref, reactive, onMounted } = Vue const app = Vue.createApp({ setup() { const selectedThingId = ref(null) const things = reactive([{id: 3, name: 'aaa'}, {id: 5, name: 'bbb'}, {id: 9, name: 'ccc'}]) onMounted(() => selectedThingId.value = things[0].id) const onChangeFunction =() => {} return { things, selectedThingId, onChangeFunction } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <select name="select" id="select" v-model="selectedThingId" @change="onChangeFunction"> <option v-for="(thing, index) in things" :key="thing.id" :value="thing.id" > {{ thing.name }} </option> </select> {{ selectedThingId }} </div>