Je suis nouveau sur Vuetify et j'ai du mal à récupérer l'index d'une option sélectionnée sur le composant v-select.
Une fois que j'ai l'index, j'aimerais remplir un champ de texte basé sur l'option cliqué.
J'ai un tableau d'objets que je récupère de Firebase et que je transmets en tant que : items prop.
Je parviens à obtenir le index à l'aide d'une option select standard avec v-for pour parcourir le tableau, puis utilisez @change pour appeler une fonction qui utilise l'objet événement pour obtenir l'index selectedIndex. Cependant, je n'arrive pas à le comprendre en essayant d'utiliser le composant v-select
Cela fonctionne:
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
item-value=""
v-model="trim.shop"
@change="populateLicense"
>
</v-select>
Méthodes: p >
populateLicense(e) {
let index = e.target.selectedIndex - 1
this.trim.license = this.shopdata[index].license
},
Composant v-select actuel (ne fonctionne pas):
<select @change="populateLicense" v-model="trim.shop">
<option value="">Select Shop</option>
<option v-for="item in shopdata" :key="item.id">
{{ item.shopname}}
</option>
</select>
Je devine la valeur de l'élément code> peut fournir ce dont j'ai besoin, mais je ne suis pas sûr de ce que je suis censé lui attribuer
Toute aide est grandement appréciée, merci!
3 Réponses :
Vous pouvez définir l'identifiant dans votre v-select ...
Et faites ceci:
document.getElementById("mySelect").selectedIndex
Est-ce ce dont vous avez besoin?
Merci pour la réponse Victor, malheureusement elle renvoie indéfini
A pu le résoudre après avoir consulté à nouveau la documentation vuetify. Passer le prop return-object était la clé.
Code mis à jour pour tous ceux qui pourraient avoir un problème similaire!
v-select:
methods: {
populateLicense(license) {
this.trim.license = license
}
}
Méthodes :
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
v-model="trim.shop"
return-object
@change="populateLicense(trim.shop.license)"
>
</v-select>
item-text="shopname" item-value=""