使用Vue.js设置计算属性的初始值

Question

我正在通过遵循与此相关的laracasts系列网络广播来尝试vuejs。在https://laracasts.com/series/learning-vue-step-by-step/episodes/6中，Jeffery Way将代码放在了http://jsfiddle.net/d4f27e5p/中。

在选择任何计划之前，初始设置显示在屏幕快照中。我想在“请选择”按钮（而不是“降级”）中设置默认值。按钮代码为：

<span v-else>
        <button @click="setActivePlan">
            {{ isUpgrade ? 'Upgrade' : 'Downgrade' }}
        </button>

我怎样才能做到这一点？

Answer 1

如何为包含附加逻辑的按钮文本添加计算属性？像这样：

buttonText: function() {
  if(!this.active.name)
    return "Please Select";

  return this.isUpgrade ? 'Upgrade' : 'Downgrade';
}

然后该按钮将使用此：

<span v-else>
    <button @click="setActivePlan">
        {{ buttonText }}
    </button>
</span>

这是更新的jsfiddle。