Set properties/ data in VueJs Component

Question

I have a VueComponent for which I need to pass a value "A". the problem is the value A can be passed VueRouter parameter or via the template interpolation. What is the best way to set a property data via both options?

e.g.

<component :property="value"></component>

if I navigate to

/component/8/edit

mounted() {
   this.property = this._route.params.id
}

Saurabh · Accepted Answer · 2016-12-07 02:33:50Z

1

You have to figure out to which parameter you want to give priority, If you want to give priority to route param, you can do following:

mounted() {
   this.property = this.$route.params.id ? this.$route.params.id  : this.property
}

If you want to give priority to props being passed, you can write:

mounted() {
   this.property = this.property ? this.property : this.$route.params.id 
}

answered Dec 7, 2016 at 2:33

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

2 Comments

Kendall Over a year ago

Slight off topic but related can a "data" property be a function when reference in the template syntax? i.e. data{ return { property(){ return this.otherProperty } } } or should it be left to computed because I want to do what you said and be able to override as needed

Kendall Over a year ago

left a message for you in the chat

Collectives™ on Stack Overflow

Set properties/ data in VueJs Component

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