Vue - Destructuring object to this (data)

Question

How can I use object destructuring to my Vue component data? This is my actual code:

data: () => ({
  descricao: '',
  perfilBase: null,
  anotherField: '',
  otherOne: false
}),

mounted () {
  this.descricao = this.$route.query.descricao
  this.perfilBase = this.$route.query.perfilBase
}

How can I do it like this? Is it possible?

mounted () {
  { this.descricao, this.perfilBase } = ...this.$route.query
}

Try to remove '...' in front of this.$route.query – ht13 Jul 16 '20 at 19:08 — ht13, Jul 16 '20 at 19:08

score 5 · Answer 1 · answered Jul 16 '20 at 19:40

5

To use destructuring with targets other than simple variables, you cannot use the shorthand syntax but need to specify the destructured property name explicitly. In your case:

mounted () {
  ({ descricao: this.descricao, perfilBase: this.perfilBase } = this.$route.query);
}

However, if the query object contains only those two properties, Object.assign is a much simpler solution:

mounted () {
  Object.assign(this, this.$route.query);
}

answered Jul 16 '20 at 19:40

Bergi

630,263
148
957
1,375

I think the first example becomes useful when changing from one case style to another, like this: `({ order_number: this.orderNumber, order_amount: this.orderAmount } = this.config);` – Giorgio Tempesta Mar 22 '21 at 14:40

score 4 · Answer 2 · answered Jul 16 '20 at 19:08

4

I don't think there's a way to be as succinct as you want to be.

The best thing you can do is probably

mounted () {
   const { descricao, perfilBase } = this.$route.query
   this.descricao = descricao
   this.perfilBase = perfilBase
}

answered Jul 16 '20 at 19:08

Axnyff

9,213
4
33
37

score 4 · Answer 3 · answered Jul 16 '20 at 19:16

4

Check if this works, i am not behind my computer right now.

{ a, b } = this.$route;
[ this.a, this.b ] = [a, b];

answered Jul 16 '20 at 19:16

yooneskh

784
7
11

1

This really works, i verified it. – yooneskh Oct 09 '20 at 18:17
1

I have to declare to make this work, on chrome. `const { a, b } = this.$route;` – Jamie Marshall Mar 04 '21 at 20:59
Yes you are right @JamieMarshall – yooneskh Mar 07 '21 at 11:26
It's two lines instead of one, but the array syntax prevents you from writing an assignment for every property extracted. – Giorgio Tempesta Mar 22 '21 at 14:43
1

@GiorgioTempesta technically the first line can be combined with the second line like this ```[this.a, this.b] = [this.$route.a, this.$route.b]``` but i prefer the 2 lined version – yooneskh Mar 22 '21 at 18:30
@yooneskh yes I totally agree: more clarity and also (slightly) less typing – Giorgio Tempesta Mar 23 '21 at 10:55

Vue - Destructuring object to this (data)

3 Answers3