javascript - 使用VueJS传递数据创建定价计划表

Question

这是我第一次尝试使用 VueJS，因此非常感谢任何解决问题的指针或更好的方法。这是我现在的位置http://codepen.io/anon/pen/ezBwJw

我正在构建一个定价计划表，用户可以在其中浏览 4 种不同的付款计划。该表格是交互式的，用户可以使用单选按钮在查看英镑和美元价格之间切换，以及查看按年或按月支付的费用。所有这些都有效，但我现在遇到的问题是我想将一些数据传递到“摘要”部分，该部分将在用户选择注册之前呈现给用户。我正在努力传递到汇总表的一项数据是价格。

当用户选择一个计划时，我希望该计划中当前显示的价格显示在“立即支付总额”字段中。在 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 方式

一种选择是创建调用 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> ，并将适当的值绑定(bind)到每个计划(这些是 props )。

我已将其更全面地实现为 JSFiddle here 。我放弃了 USB 与英镑货币，因为我想让事情变得简单。我希望这能给您一些关于如何解决您的问题的想法!