Setting initial value for computed property with vuejs

Question

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?

Peter · Accepted Answer · 2016-01-11 17:01:56Z

5

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.

answered Jan 11, 2016 at 17:01

Peter

12.8k4 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1592380 Over a year ago

Thank you Peter, that works! I tried something similar at jsfiddle.net/d4f27e5p/44 . Unfortunately its not working, Any idea why?

Peter Over a year ago

You were close. Here's an updated fiddle that fixes the issue: jsfiddle.net/d4f27e5p/45. You had changed isUpgrade to return the button text but you hadn't updated the template. I just changed the button content to {{ isUpgrade }}.

Collectives™ on Stack Overflow

Setting initial value for computed property with vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related