2017-10-16 1 views
0

Le :selected prop est pas la sélection de la cible option dans vue2 quand j'utiliser v-model pour select:Vue choisi prop ne fonctionne pas avec v-modèle

Modèle

... 
<select v-model="form.item"> 
    <option :value="item.id" v-for="(item, index) in items" :selected="item.status == 2">{{ item.name }}</option> 
</select> 
... 

Script

data: function() { 
    return { 
     items: [{id:1, name: "foo", status: 1},{id: 3, name: "bar", status: 2}], 
     form: {item: null} 
    } 
} 

Dans ce cas, après monté, il n'y a pas d'option sélectionnée.

Comment puis-je résoudre ce problème?

Remarque

Quand je supprimer v-model il fonctionne très bien (cible option est sélectionné par défaut), mais je n'ai pas la valeur de la option sélectionnée dans form.item

+1

v-modèle et: sélectionné ne fonctionnent pas ensemble. Il est expliqué dans le document officiel. Vous ne pouvez utiliser que l'un des deux. –

+0

@hannesneukermans connaissez-vous une bonne solution pour cela? –

Répondre

2

v-modèle ignorera la valeur initiale, cochée ou sélectionnés attributs. trouvé sur tous les éléments de formulaire !!
La solution est d'enlever: la liaison sélectionnée. et utiliser des accessoires de données pour se lier à v-modèle

<select v-model="form.selectedItem"> 
    <option :value="item.id" v-for="(item, index) in items">{{ item.name }} 
    </option> 
</select> 

déclare instance vue comme

data() { 
return { 
    selectedItem: 2 
} 

}

link to offical documentation