Using Vue3, I would like to generate a dropdown list from the following data
{
"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"
}
]
}
the template to generate the dropdown list is
<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>
I expected the following HTML result with the third option (Oeuvre) selected
<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>
but what I got is :
<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>
But if replace :selected by :foo I get the expected result.
Why the selected attribute is not taken into account?
You can set your selected option to 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>