CODEWITHSUNDEEP
javascriptvue.js
user1592380
user1592380

Reputation: 36267

Setting initial value for computed property with vuejs

enter image description here

I'm trying out vuejs by following along with the laracasts series of webcasts on this. In https://laracasts.com/series/learning-vue-step-by-step/episodes/6, Jeffery Way has put the code in the http://jsfiddle.net/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?

Upvotes: 3

Views: 13811

Answers (1)

Peter
Peter

Reputation: 12711

How about adding a computed 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.

Upvotes: 5

Related Questions