VueJSを使用してデータを渡して価格プランテーブルを作成する

Question

これはVueJSを使用する最初の試みであり、問​​題を解決するためのあらゆるポインタやより良い方法が高く評価されています。ここに私がいる場所http://codepen.io/anon/pen/ezBwJw

私は4つの異なる支払計画を閲覧できる価格設定表を作成しています。この表はインタラクティブなもので、ユーザーはラジオボタンにアクセスして、表示価格をGBP & USDで表示したり、年間または月に支払った場合の料金を表示することができます。これはすべて機能していますが、私が今問題になっているのは、サマリーセクションにデータを渡して、サインアップする前にユーザーに提示するということです。私がサマリーテーブルに渡すのに苦労しているデータの1つは価格です。

ユーザーがプランを選択すると、そのプランに現在表示されている価格が[今すぐ支払う合計]フィールドに表示されます。 jQueryのでは、私はこの（Codepenの簡易版）のような何かをしたい...

<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を使用していますので、私はどのようにと迷ってしまいました現在表示されているアイテムを取得し、そのアイテムをサマリフィールドに渡します。

Answer 1

jQueryの道は

1つのオプションは、現在の価格の変化に影響を与えるたび、変数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の通貨を取り除いた。私はこれがあなたの問題に取り組む方法についていくつかのアイデアを与えることを願っています！