VueJS를 사용하여 데이터를 전달하여 가격 책정 계획 테이블 만들기

Question

이것은 VueJS 사용에 대한 나의 첫 번째 시도이므로 문제를 해결할 수있는 더 좋은 방법이나 방법을 찾으면 많은 도움이됩니다. 여기 내가있는 곳입니다 http://codepen.io/anon/pen/ezBwJw

사용자가 4 가지 지불 계획을 검색 할 수있는 가격 책정 계획 테이블을 구축하고 있습니다. 이 테이블은 대화 형이며 사용자는 GBP & USD로 보는 가격을 전환하는 라디오 버튼에 액세스 할 수 있으며 연간 또는 월간 지불하는 경우 비용을 볼 수 있습니다. 이 모든 작업은 가능하지만 현재 내가 겪고있는 문제는 일부 데이터를 '요약'섹션에 전달하여 가입하기 전에 사용자에게 표시된다는 것입니다. 요약표로 전달하는 데 어려움을 겪고있는 데이터 중 하나가 가격입니다.

사용자가 요금제를 선택하면 '지금 지불'필드에 해당 요금제에 현재 표시된 가격을 표시하고 싶습니다. jQuery를 나는

<div> 
    <h1>Basic</h1> 
    <div class="price">7</div> 
    <a href="#" class="select-plan">Select this plan</a> 
</div> 

<h2 class="total"></h2> 


$('.select-plan').on('click', function() { 
    var planName = $(this).parent().find('.price').text(); 
    $('.total').text(planName); 
}); 

나는 현재 각각의 계획에 대해 다른 가격을 표시 v-if을 사용하고, 그래서 잃었어요

로 ... 이런 식으로 뭔가 (Codepen의 단순화 된 버전)을 할 거라고 어떻게 현재 보려는 항목을 가져 와서 요약 필드로 전달합니다.

Answer 1

JQuery와 방법

하나의 옵션은 updatePrice 메소드를 호출 전문가를 만들 때마다 현재의 가격 변동에 영향을 미친다 변수입니다.

watch: { 
    'activePlan': 'updatePrice', 
    'currency': 'updatePrice', 
    'frequency': 'updatePrice' 
}, 

... 그리고 methods에 : 그 변화

updatePrice: function() { 
    this.price = $('.price.' + this.activePlan).text(); 
} 

Here is a fork of your CodePen 예를 들어. JQuery 선택기가 올바른 요소를 찾을 수 있도록 클래스로 계획 이름을 추가했음을 주목하십시오.

구성 요소 방법 (이렇게!) 개인적으로

, 나는 당신이 완전히 다른 접근 방식을 가지고 더 나을 거라고 생각합니다. 나는 계획을 위해서 a custom component을 만들 것이다. 이렇게하면 재사용 및 관리가 용이 ​​한 방식으로 필요한 모든 기능을 캡슐화 할 수 있습니다.

는 예를 들어, 구성 요소이

Vue.component('plan-component', { 
    template: '#plan-component', 

    props: ['frequency', 'name', 'priceYearly', 'priceMonthly'], 

    computed: { 
    'price': function() { 
     // Move the logic for determining the price into the component 
     if (this.frequency === 'year') { 
     return this.priceYearly; 
     } else { 
     return this.priceMonthly; 
     } 
    } 
    }, 

    methods: { 
    makeActivePlan() { 
     // We dispatch an event setting this to become the active plan 
     // A parent component or the Vue instance would need to listen 
     // to this event and act accordingly when it occurs 
     this.$dispatch('set-active-plan', this); 
    } 
    } 
}); 

구성 요소가 HTML 템플릿에 관련된처럼 만들 수 있습니다. 따라서 HTML에는 id가 plan-component 인 템플리트 태그가 필요합니다.

<template id="plan-component"> 
    <h1>{{ name }}</h1> 
    <div> 
    <span>{{ price }}</span> 
    </div> 
    <a class="select-plan" v-on:click="makeActivePlan($event)" href="#">Select this plan</a> 
</template> 

따라서 각 계획에는 해당 계획과 관련된 데이터를 처리하는 자체 구성 요소가 있습니다. 표의 각 계획에 대해 동일한 HTML을 반복하는 대신 새 맞춤 <plan-component>을 사용하고 각 값 (props)에 해당 값을 바인딩 할 수 있습니다.

나는 이것을 JSFiddle here으로 좀 더 완벽하게 구현했습니다. 나는 물건을 단순하게하고 싶었 기 때문에 USB 대 GBP 통화를 없앴습니다. 나는 이것이 당신의 문제를 다루는 방법에 대한 약간의 아이디어를 줄 수 있기를 바랍니다.