2017-04-13 6 views
2

Ich habe ein paar Karten funktioniert wie Radio-Button.vue 2 Wie wird das V-Modell aktualisiert, wenn der Wert geändert wird?

<div class="card"> 
    <input 
     checked="" 
     class="card__input" 
     type="radio" 
     v-model="templatePicked" 
     :value="template.value" 
     name="template" 
     :id="template.id" 
    > 
    <label :for="template.id" class="card__label"></label 
    <ui-select 
     name="version" 
     placeholder="Select a version" 
     :keys="{ label: 'text', value: 'value' }" 
     :options="templateVersions" 
     v-model="template" 
    ></ui-select> 
</div> 

Also, wenn wir bei der Auswahl der Artikel klicken (in ui-select) wir id und value für Kartenoptionsfeld aktualisieren. Die Frage ist, wie templatePicked aktualisiert werden soll. Weil es jetzt nur aktualisiert wird, wenn ich auf Radiobutton klicke.

P.S Ich benutze vue 2.2.6. Wählen Komponente: https://josephuspaye.github.io/Keen-UI/#/ui-select Es hat @change Ereignis, aber ich verstehe nicht, wie man es in meinem Fall verwendet.

P.S.S Es funktioniert tatsächlich perfekt in vue 1.0.28, ich verwendete :value.sync="ubuntu" auf Komponente.

Jede Hilfe, bitte!

+0

Hallo, vielleicht ist das @ select -Ereignis dafür nützlich, zum Beispiel: @ select = "setTemplatePicked (template)", dann innerhalb der Methode setTemplatePicked die Logik der ausgewählten Vorlage. –

+0

@ M.Suurland Mann du hast Recht! Es funktioniert jetzt, danke. Du kannst eine Antwort schreiben und ich werde es als das beste markieren. Aber warum, wenn ich eine andere Option in ui-select und Radio-Button wähle deaktiviert? – Hola

+0

versuchen, {{templatePicked}} in Ihrem HTML zu setzen, um zu sehen, wie sich der Wert von templatePicked ändert, ich denke, Sie irgendwo falsch eingestellt –

Antwort

2

Sie können das @select-Ereignis (wenn ein Element ausgewählt ist) oder beispielsweise @focus anhören. Weitere Optionen finden Sie unter https://josephuspaye.github.io/Keen-UI/#/ui-select (Ereignisse).

<ui-select 
    name="version" 
    placeholder="Select a version" 
    :keys="{ label: 'text', value: 'value' }" 
    :options="templateVersions" 
    v-model="template" 
    @select="setTemplatePicked(template)" 
></ui-select> 

nächstes ein Verfahren hinzuzufügen (zum Beispiel setTemplatePicked), die die ausgewählte Vorlage einstellt.

+0

Ein bisschen zusätzliche Erklärung: https://vuejs.org /v2/guide/migration.html#once-and-sync-Modifiers-on-v-bind-removed –

+0

Es funktioniert auf Klick. Aber mir ist aufgefallen, dass, wenn ich eine Option als Standard auswähle, wie dann die Daten aus der Vorlage abgerufen und auf template gesetzt werden? Anfangs, wenn die Seite geladen ist – Hola

Verwandte Themen