Set Object key as variable in Javascript with Vue Router

Question

I am trying to pass a variable as the param to vue-router so it can be set dynamically. Pretty much as the example below:

<router-link :to="{ 
  name: notification.name,
  (notification.param_name): notification.param_value
}">Blabla</router-link>

I am not looking at setting the key like this: var[notification.param_name].

I suppose this question could be expanded to a more general problem, but I am having a hard time explaining it in another way.

thanksd · Accepted Answer · 2017-11-21 15:03:17Z

1

It'd be simplest to make it a computed which returns the definition of the route based on the notification object (note that you need to specify the params inside the params property of the object):

computed: {
  notificationRoute() {
    let { name, param_name, param_value } = this.notification;
    return { name, params: { [param_name]: param_value } };
  }
}

And bind that to the to:

<router-link :to="notificationRoute">Blabla</router-link>

edited Nov 21, 2017 at 15:03

answered Nov 21, 2017 at 14:57

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

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

2 Comments

Fredrik Over a year ago

Thank you. The actual answer I was looking for was [param_name]:. Although, making the route computed seems wise!

thanksd Over a year ago

Yeah as a general rule, if I'm passing anything inline to a component that needs to be more than one line, I define it as a computed property instead.

Collectives™ on Stack Overflow

Set Object key as variable in Javascript with Vue Router

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