Vue dynamic query key

Question

I wanna make url with choosen settings

const settings = this.getSettings();//returns object
Object.entries(settings).forEach(([key, value]) => {
       this.$router.push({ query: { ...this.$route.query, key: value } }); //why i can't access key here?
});

The "key" in forEach table argument is a variable, while the "key" inside the object below is an object property named "key" — Dimitris Papazacharias
– Dimitris Papazacharias, Commented Dec 29, 2020 at 13:56

Boussadjra Brahim · Accepted Answer · 2020-12-29 13:53:26Z

2

You should wrap the key by [] accessor :

this.$router.push({ query: { ...this.$route.query, [key]: value } });

answered Dec 29, 2020 at 13:53

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

ZPiDER · Accepted Answer · 2020-12-29 13:55:49Z

1

just a guess: "key" in query: { ...this.$route.query, key: value } will be treated as a string, i guess you want the "key" variable to be used instead.

var query = { ...this.$route.query };
query[key] = value;
this.$router.push({ query: query });

but then i also suspect that you want all key/values in the url? so you'll have to restructure..

const settings = this.getSettings();
this.$router.push({ query: { ...this.$route.query, ...settings }});

answered Dec 29, 2020 at 13:55

ZPiDER

4,4721 gold badge20 silver badges18 bronze badges

Collectives™ on Stack Overflow

Vue dynamic query key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related