Weitergabe von Daten mit VueJS zur Erstellung einer Preisplan-Tabelle

Question

Dies ist mein erster Vorstoß in die Verwendung von VueJS, so dass alle Hinweise oder besseren Möglichkeiten zur Lösung des Problems sehr geschätzt werden. Hier ist, wo ich bin http://codepen.io/anon/pen/ezBwJw

Ich baue eine Preisplan-Tabelle, wo Benutzer 4 verschiedene Zahlungspläne durchsuchen können. Die Tabelle ist interaktiv, Benutzer haben Zugang zu Radioknöpfen, die zwischen Betrachtungspreisen in GBP & USD schalten, und sehen die Kosten an, wenn sie pro Jahr oder pro Monat zahlen. All dies funktioniert, aber das Problem, das ich jetzt habe, ist, dass ich einige Daten an einen "Zusammenfassung" -Abschnitt weiterleiten möchte, der dem Benutzer präsentiert wird, bevor er sich anmeldet. Das einzige Stück Daten, das ich mühsam an die Übersichtstabelle übergebe, ist der Preis.

Wenn ein Benutzer einen Plan auswählt, möchte ich, dass der Preis, der gerade in diesem Plan angezeigt wird, im Feld "Jetzt bezahlen" angezeigt wird. In jQuery würde ich so etwas wie dieses (vereinfachte Version von Codepen) tun ...

<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); 
}); 

ich zur Zeit mit v-if die unterschiedlichen Preise für die jeweiligen Pläne zu zeigen, so dass ich verloren, wie ich würde das aktuell angezeigte Element abrufen und dieses an das Übersichtsfeld übergeben.

Answer 1

JQuery Way

Eine Möglichkeit ist, Beobachter zu erstellen, die eine updatePrice Methode aufrufen, wenn eine Variable, die die aktuellen Preisänderungen bewirkt. Zum Beispiel:

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

... und dann in methods:

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

Here is a fork of your CodePen mit dieser Änderung. Beachten Sie, dass ich den Plannamen als Klasse hinzugefügt habe, damit der JQuery-Selektor das richtige Element finden kann.

Component Way (tun dies!)

Ich persönlich denke, es Ihnen besser gehen würde einen ganz anderen Ansatz. Ich würde a custom component für Pläne machen. Auf diese Weise können Sie alle benötigten Funktionen wiederverwendbar und überschaubar kapseln.

Zum Beispiel könnten Sie eine Komponente wie diese

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); 
    } 
    } 
}); 

Komponenten vornehmen, werden in eine HTML-Vorlage verwendet. In Ihrem HTML benötigen Sie also ein Template-Tag mit der 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> 

So erhält jeder Plan seine eigene Komponente, die die Daten zu diesem Plan behandelt. Und anstatt für jeden Plan in einer Tabelle denselben HTML-Code zu verwenden, können Sie einfach Ihre neue benutzerdefinierte <plan-component> verwenden und die entsprechenden Werte an jeden Plan binden (dies sind die props).

Ich habe dies vollständiger als JSFiddle here implementiert. Ich habe die USB vs GBP-Währung losgeworden, weil ich die Dinge einfach halten wollte. Ich hoffe, das gibt Ihnen eine Idee, wie Sie Ihr Problem angehen können!