JQuery Way

Question

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

的地方

我正在构建一个定价计划表，用户可以在其中浏览4种不同的付款计划。该表是交互式的，用户可以访问单选按钮，这些按钮可以在GBP和＆amp;之间切换查看价格。美元，以及每年或每月支付的费用。所有这一切都有效，但我现在面临的问题是我想将一些数据传递给一个总结＆＃39;将在用户选择注册之前呈现给用户的部分。我努力传递到汇总表的一条数据是价格。

当用户选择计划时，我希望该计划中当前显示的价格显示在“现在支付的总额”中。领域。在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 Way

一种选择是创建在影响当前价格的变量发生变化时调用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 vs GBP货币，因为我想保持简单。我希望这可以让您了解如何解决您的问题！

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

1 个答案:

JQuery Way

组件方式（做到这一点！）