Ziel: Um mehrere Optionen eines Select-Tags auswählen.Vue js: Mehrere Optionen Auswahl
Versuch: Die documentation sagt: ein Multi-Select-Eingang zu implementieren, die Eigenschaft gebunden sein v-model
verwenden sollte ein Array sein.
Fehler: [Vue warn]: erwartet einen Array-Wert für seine Bindung, hat aber String erhalten.
Der Wert gebunden an (multipleSelections
), ist ein Array, was ist der Grund dafür?
Hier ist die jsfiddle.
Skript:
new Vue({
el:'#app',
data: function() {
return {
multipleSelections: ["Mr Potato (Manager)"],
data: null,
multiple: "true",
assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"]
}
},
created() {
console.log("selections: ",this.multipleSelections);
}
});
html:
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div class='container' id='app'>
<h2>{{"title".toUpperCase()}}</h2>
<p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p>
<select
:multiple="multiple === 'true'"
v-bind:class="{ 'fix-height': multiple === 'true' }"
v-model="multipleSelections"
>
<option
v-for="asset in assets"
:value="asset">
{{asset}}
</option>
</select>
{{ multipleSelections }}
Danke, ich werde diese Antwort akzeptieren, obwohl ich den Ausdruck benutzt hatte, so dass ich diese Komponente sowohl für Ein- und Mehr wählt Gebrauch verwenden kann. Irgendeine Idee, wie ich das machen kann? –
@AmreshVenugopal Nicht sicher, warum das nicht funktioniert, habe ich viele Möglichkeiten ausprobiert, werde mich an Sie wenden, wenn ich etwas Ähnliches gefunden habe. – Saurabh