How to create a droptdown list with a selected option usion v-for in Vue3?-CodePudding

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 >
    <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?

CodePudding user response：

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 >
    <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>