Wie aktualisiert man 2 Attribute mit einem Optionsfeld?

Question

Ich bin mir nicht sicher, ob ich gerade in einer jQuery Denkweise stecke, aber gibt es eine Möglichkeit, 2 Modellattribute mit einem Optionsfeld zu aktualisieren? Zur Zeit habe ich 2 Radioknöpfe mit einem versteckten. Der sichtbare prüft die Sekunde mit einem @ click-Ereignis, das die nächste Eingabe erhält und auf wahr setzt.

var app = new Vue({ 

    data: { 
    order: { 
     amount: 
     type: 
    } 
    }, 

    methods: { 
    selectType: function(e) { 
     e.currentTarget.getElementSibling.checked = true; 
    } 
    } 
}); 

<form> 
    <input type="radio" v-model="order.amount" value=15 @click="selectType">$15</input><br> 
    <input type="radio" v-model="order.type" value="small" style="display:none"> 

    <input type="radio" v-model="order.amount" value=15 @click="selectType">$15</input><br> 
    <input type="radio" v-model="order.type" value="med" style="display:none" @click="selectType"> 

    <input type="radio" v-model="order.amount" value=20 >$20</input><br> 
    <input type="radio" v-model="order.type" value="large" style="display:none"> 
</form> 

Answer 1

So wie ich es verstehe, ist die v-model Syntax am besten einen einzigen Wert für die Bindung. Du könntest versuchen, den Wert irgendwie zu einem JSON-String zu machen und ihn dann zu dekodieren ... aber das hört sich nach einer schlechten Idee an. Hier sind drei Ideen:

mit JQuery und Vue

Stattdessen könnten Sie die Radio-Buttons geben Attribute für jeden Wert, den Sie möchten, und dann diese Attribute auf dem Klick Rückruf parsen. Zum Beispiel:

<input type="radio" name="rad" btn-amount="10" btn-type="small" @click="selectType($event)">$15 <br> 
<input type="radio" name="rad" btn-amount="15" btn-type="med" @click="selectType">$15<br> 
<input type="radio" name="rad" btn-amount="20" btn-type="large" @click="selectType">$20<br> 

und dann ein Verfahren:

selectType: function(e) { 
    this.order.amount = $(e.currentTarget).attr('btn-amount'); 
    this.order.type = $(e.currentTarget).attr('btn-type'); 
} 

Here's a JSFiddle es in Aktion zeigt.

Vue Mit nur

Alternativ können Sie die Daten für die Optionen in die vue Instanz verschieben, anstatt sie auf über die Radio-Buttons platzieren. Fügen Sie zum Beispiel eine options Array auf die Daten und iterieren es in der HTML die Tasten

<div v-for="option in options"> 
    <input type="radio" name="rad" @click="selectType(option)">${{ option.amount }} 
</div> 

Hinweis zu erstellen, die Sie die aktuellen option in dem for-Schleife an den Click-Handler passieren können! Das heißt, Sie selectType wie schreiben:

selectType: function(option) { 
    this.order = option; 
} 

Das ist sehr sauber, und was ich empfehlen, wenn Sie auf der Beibehaltung der Radio-Button-Funktionalität einfach planen.

Here is a JSFiddle zeigt es in Aktion.

Mit Vue Komponenten

Aber, wenn Sie auf die Dinge komplexer planen können Sie den Radio-Button-Funktionalität in eine Komponente verkapseln wollen.

Betrachten Sie die Vorlage:

<template id="radio-order"> 
    <div> 
    <input type="radio" :name="group" @click="setOrder">${{ amount }} 
    </div> 
</template> 

und die damit verbundene Komponente:

Vue.component('radio-order', { 
    template: '#radio-order', 

    props: ['group', 'amount', 'type'], 

    methods: { 
    'setOrder': function() { 
     this.$dispatch('set-order', { 
     amount: this.amount, 
     type: this.type 
     }) 
    } 
    } 
}); 

Jetzt können Sie <radio-order> Komponenten machen, die eine set-order -Ereignis, wenn darauf geklickt. Die übergeordnete Instanz kann auf diese Ereignisse warten und entsprechend handeln.

Zugegeben, diese Methode ist ausführlicher. Wenn Sie jedoch überlegen, komplexere Funktionen zu implementieren, ist dies wahrscheinlich der richtige Weg.

Here's a JSFiddle davon in Aktion.

Natürlich gibt es viele Möglichkeiten, das Problem zu lösen, aber ich hoffe, diese Ideen helfen!