Usando Vue3, me gustaría generar una lista desplegable a partir de los siguientes datos
{ "ResourcesTypes" : [ { "label": "Sites", "uri": "http://example.org/edytem#Site" }, { "label": "Oeuvres", "uri": "http://patrimalp.org/brocarts/onto#Oeuvre", "selected" : true }, { "label": "Brocarts", "uri": "http://patrimalp.org/brocarts/onto#Brocart" } ] }la plantilla para generar la lista desplegable es
<template> <div class="dropdown"> <select v-model="selected" @change="onChangeMethod($event)"> <option disabled value="">Sélectionnez le type de ressources</option> <option v-for="resourceType in resourcesTypesData.ResourcesTypes" :key="resourceType.uri" :value="resourceType.uri" :selected="resourceType.selected" > {{ resourceType.label }} </option> </select> </div> </template>Esperaba el siguiente resultado HTML con la tercera opción (Oeuvre) seleccionada
<select> <option disabled="" value="">Sélectionnez le type de ressources</option> <option value="http://example.org/edytem#Site">Sites</option> <option value="http://patrimalp.org/brocarts/onto#Oeuvre" selected>Oeuvres</option> <option value="http://patrimalp.org/brocarts/onto#Brocart">Brocarts</option> </select>pero lo que tengo es:
<select> <option disabled="" value="">Sélectionnez le type de ressources</option> <option value="http://example.org/edytem#Site">Sites</option> <option value="http://patrimalp.org/brocarts/onto#Oeuvre">Oeuvres</option> <option value="http://patrimalp.org/brocarts/onto#Brocart">Brocarts</option> </select> Pero si reemplaza :selected por: foo , obtengo el resultado esperado. ¿Por qué no se tiene en cuenta el atributo selected ?
Puede configurar su opción seleccionada para v-model:
const app = Vue.createApp({ data() { return { resourcesTypesData: { "ResourcesTypes" : [{"label": "Sites", "uri": "http://example.org/edytem#Site", "selected" : false }, {"label": "Oeuvres", "uri": "http://patrimalp.org/brocarts/onto#Oeuvre", "selected" : true }, {"label": "Brocarts", "uri": "http://patrimalp.org/brocarts/onto#Brocart", "selected" : false}]}, selected: null } }, computed: { select() { return this.resourcesTypesData.ResourcesTypes.find(r => r.selected).uri } }, mounted() { this.selected = this.select } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="dropdown"> <select v-model="selected" @change="onChangeMethod($event)"> <option disabled value="">Sélectionnez le type de ressources</option> <option v-for="resourceType in resourcesTypesData.ResourcesTypes" :key="resourceType.uri" :value="resourceType.uri" > {{ resourceType.label }} </option> </select> </div> </div>