1つのラジオボタンで2つの属性を更新するにはどうすればよいですか？

Question

jQueryの考え方に慣れているのかどうかは分かりませんが、2つのモデル属性を1つのラジオボタンで更新する方法はありますか？現在私は2つのラジオボタンを隠しています。目に見えるものは、次の入力を取得し、それをtrueに設定する@clickイベントで秒をチェックします。

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

私がそれを理解する方法として、v-model構文は単一の値をバインドするのに最適です。あなたは何とか値をJSON文字列にしてからそれを解読しようとすることができます...しかし、それは悪い考えのように聞こえます。ここでは3つのアイデアです：

代わりにjQueryとVueのを使用して

、あなたがしたい値ごとに属性のラジオボタンを与え、[OK]をクリックしますコールバックにそれらの属性を解析できます。

<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> 

、次いで方法：例えば

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

Here's a JSFiddleアクションでそれを示します。唯一

別のVueを使用して

、あなたではなく、ラジオボタンの上にそれらを置くよりも、VUEインスタンスにオプションのデータを移動することができます。例えば、データへoptions配列を追加し、ボタンにあなたがクリックハンドラへのforループで現在のoptionを渡すことができ

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

お知らせを作成するために、HTMLでそれを反復処理します！

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

これは非常にきれいで、何をラジオボタンの機能をシンプルに保つことを予定している場合、私はお勧めします。それはあなたにselectTypeを書くことができますを意味します。

Here is a JSFiddle実際に動作しています。あなたは物事がより複雑に作ることに計画している場合は、コンポーネントにラジオボタンの機能をカプセル化することも、Vueのコンポーネント

を使用した。しかし

。

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

とその関連コンポーネント：

は、テンプレートを考えてみましょう

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

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

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

今、あなたがクリックしたときset-orderイベントをディスパッチ<radio-order>部品を作ることができます。親インスタンスは、これらのイベントをリッスンし、適切に動作することができます。

確かに、この方法はより冗長です。しかし、より複雑な機能を実装することを考えているのであれば、それはおそらく道のりです。

Here's a JSFiddleが実際に動作しています。

もちろん、問題を解決する方法はまだまだありますが、これらのアイデアが役立つことを願っています。