하나의 라디오 버튼으로 2 개의 속성을 업데이트하는 방법은 무엇입니까?

Question

jQuery 사고 방식에 갇혀 있지만 두 개의 모델 속성을 하나의 라디오 버튼으로 업데이트하는 방법이 있는지 확실하지 않습니다. 현재 나는 2 개의 라디오 버튼을 가지고있다. 눈에 보이는 객체는 두 번째를 @click 이벤트로 검사하여 다음 입력을 가져 와서 true로 설정합니다.

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 문자열로 만든 다음 디코드하려고 시도 할 수는 있지만 나쁜 생각처럼 들릴 수 있습니다. 여기에 세 가지 아이디어가 있습니다 :

대신 JQuery와 및 뷰를 사용하여

, 당신은 당신이 원하는 각 값에 대해 속성 라디오 버튼을 제공하고 클릭 콜백에 이러한 특성을 분석 할 수 있습니다.

<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 인스턴스에 옵션에 대한 데이터를 이동할 수있는 뷰를 사용

. 예를 들어, 클릭 처리기에 for 루프에서 현재 option을 통과 할 수있는 버튼

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

공지 사항을 작성하는 HTML에 걸쳐 데이터에 options 배열을 추가하고, 반복!

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

이 매우 깨끗하고, 당신이 라디오 버튼의 기능을 간단하게 유지하는 계획이 있다면 추천 : 그것은 당신이 같은 selectType을 쓸 수 있다는 것을 의미합니다.

Here is a JSFiddle.

당신이 일을 더 복잡하게 계획 경우 구성 요소에 라디오 버튼의 기능을 캡슐화 할 수 있습니다, 뷰 구성 요소

를 사용하지만.

<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 실제 사용 중입니다.

물론 문제를 해결하는 방법은 여러 가지가 있지만 이러한 아이디어가 도움이되기를 바랍니다.