J'ai mis v-model dans v-select mais il retourne tout l'objet
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" value="id" label="labels">
</v-select>
{{selected}}
</div>
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{id: 1, labels: 'foo'},
{id: 3, labels: 'bar'},
{id: 2, labels: 'baz'},
],
selected: '',
}
})
cela en résultera
y a-t-il un moyen d'obtenir l'ID des objets sélectionnés uniquement au lieu de l'objet entier? J'ai essayé de mettre value = "id" mais ne fonctionne toujours pas.
3 Réponses :
Voulez-vous dire
?
Cela liera l'ID sélectionné dans votre V-select.
s'il vous plaît voir mon dernier commentaire dans mon post.
Ouais, vous vouliez en avoir 1 au lieu de {id: 1, labels: foo}, non? Utiliser {{selected.id}} au lieu de {{selected}} le résoudra si c'est tout ce que vous voulez.
Qu'entendez-vous exactement par v-model au fait? Voulez-vous afficher l'étiquette et obtenir l'ID en tant que valeur ou définir l'id comme ID du v-select?
ce que je voulais dire, c'est que la valeur de selected lui-même doit être 1 au lieu de l'objet entier .. donc je ne ferais pas {{selected.id}}
value = {{selected.id}} renverra 1 comme valeur au lieu de l'objet entier
@Jiel si vous ne voulez pas utiliser {{selected.id}} , votre autre option serait d'utiliser une propriété calculée et de lui donner un nom comme selectedID et vous pouvez lui demander de renvoyer simplement la valeur. Le problème est que vue-select stocke vos options en tant qu'objets, il renverra donc toujours cet objet lorsque vous le liez -> codepen.io/anon/pen/JzWPKO
@MikeDiglio ahh oui, c'est exactement ce que je voulais. veuillez mettre ceci comme votre réponse ..
Votre meilleure option serait d'utiliser une propriété calculée afin que vous puissiez manipuler sélectionné pour renvoyer la valeur demandée:
computed: {
selectedID: function () {
return this.selected.id;
}
}
Fonctionnement Codepen avec votre exemple
Autant j'aime vraiment l'utilisation de la solution de contournement de la propriété calculée ici. Je ne sais toujours pas pourquoi il est préféré à selected.id.
@NeonNatureEX il produit exactement la même chose, mais ce que je voulais, c'était l'idée parce que je l'utilise à des fins différentes.
Ah, je vois. Content que vous ayez la réponse.
@Jiel, voici la démo fonctionnelle
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" label="labels">
</v-select>
selectedID : {{selectedID}}
</div>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
selected:'',
options: [
{ id: 0, labels: 'Vegetables' },
{ id: 1, labels: 'Cheese' },
{ id: 2, labels: 'Fruits' }
]
},
computed: {
selectedID: function () {
return this.selected.id
}
}
})
quelle bibliothèque utilisez-vous pour v-select?
@DuongDang sagalbot.github.io/vue-select
qu'essayez-vous exactement de retourner? Pouvez-vous également nous montrer votre objet de données afin que nous puissions voir comment vos
optionssont balisées? - Puisqueselectedest un objet, vous devriez être en mesure de renvoyer la valeur que vous voulez en faisant{{selected.id}}(ou quelle que soit la valeur que vous renvoyez@MikeDiglio je veux mettre l'identifiant des objets sélectionnés uniquement dans v-model, dans ce cas, il met l'objet entier .. donc dans selected, il doit avoir la valeur "1". au lieu de {id: 1, labels: foo}