I'm trying out vuejs by following along with the laracasts series of webcasts on this. In , Jeffery Way has put the code in the / .

The initial setting is shown in the screenshot, before any plan is selected. I would like to set a default value in the button of "please select " (instead of "Downgrade") The button code is:

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

How can I do this?

I'm trying out vuejs by following along with the laracasts series of webcasts on this. In https://laracasts./series/learning-vue-step-by-step/episodes/6, Jeffery Way has put the code in the http://jsfiddle/d4f27e5p/ .

The initial setting is shown in the screenshot, before any plan is selected. I would like to set a default value in the button of "please select " (instead of "Downgrade") The button code is:

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

How can I do this?

• javascript
• vue.js

1 Answer 1

How about adding a puted property for the button text that includes the additional logic? Something like this:

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

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

Then the button would use this:

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

Here's an updated jsfiddle.