Vue.js default function parameter destructuring and 'this'

Question

I have a problem with referencing to data with this while trying to declare default parameters combined with destructuring. Anyone knows how to do it?

activated () {
  this.fillData()
},

data () {
  return {
    chartData: {
      distributionInitialData: {
        // data here
      }
    }
  }
},

methods: {
  fillData ({
      must = this.chartData.distributionInitialData,
      nice = this.chartData.distributionInitialData
    }) {
    // do something
    // function doesn't even get here because it gets error:
    // TypeError: Cannot read property 'must' of undefined
    // at VueComponent.fillData (Component.vue?4e6a:230)
    // at VueComponent.activated (Component.vue?4e6a:123)
  }
}

Not sure if duplicate but definitely related: https://stackoverflow.com/a/58934526/1048572 — Bergi, Nov 19 '19 at 19:59
My problem is more about not able to access `this`. All the other things are working. For now I had to settle for two arguments instead of destructuring one, but question is still valid - I think it's a quite interesting problem to solve. — jean d'arme, Nov 19 '19 at 20:09
Accessing `this` works just fine. The problem is that you are *assigning* to those properties, not using them as default values. — Bergi, Nov 19 '19 at 20:17
I tried to use `=`, but because it's JSON I had to use `:` instead and that's where it blew. If I use `=` then I get `undefined` error. — jean d'arme, Nov 19 '19 at 20:19
There's no JSON around. It's a destructuring pattern in a method definition. Can you please post the entire code (the method body, and how you are calling it) and the complete error message you got? — Bergi, Nov 19 '19 at 20:22
@Antonio I knew I missed something! That's what I was looking for - thank you! Answer accepter of course :D — jean d'arme, Nov 19 '19 at 20:37

Diamond · Accepted Answer · 2019-11-19T21:04:21.850

1

You need to set the default value for the parameter(Object), but not to its properties.

methods: {
  fillData ({must, nice} = {
      must: this.chartData.distributionInitialData,
      nice: this.chartData.distributionInitialData
    }) {
    // do something
  }
}

Updated by Bergi's advice.

methods: {
  fillData ({
      must: this.chartData.distributionInitialData,
      nice: this.chartData.distributionInitialData
    } = {}) {
    // do something
  }
}

FYI, here is a simple codepen.

edited Nov 19 '19 at 21:04

answered Nov 19 '19 at 20:21

Diamond

3,470
2
19
39

This doesn't work with `fillData({must: 2})` though – Bergi Nov 19 '19 at 20:44
1

@Bergi Thanks, I noticed that and I updated with your answer. – Diamond Nov 19 '19 at 21:05

score 0 · Answer 2 · answered Nov 19 '19 at 19:18

0

You can do.

fillData ({ must, nice}) {
    must = must || this.chartData.distributionInitialData
    nice = nice || this.chartData.distributionInitialData

    // do something
}

answered Nov 19 '19 at 19:18

Nafees Anwar

6,324
2
23
42

score 0 · Answer 3 · answered Nov 19 '19 at 20:23

So the issue has to do with how Vue binds the methods to the component as it is created. The function definition does not have access to the instance, but inside of it you may use this.

The easiest solution would be to do an immediate check for undefined and set based on the desired default.

fillData({ must, nice }) {
    if (must === undefined) must = this.chartData.distributionInitialData;
    if (nice === undefined) nice = this.chartData.distributionInitialData;

    // any other code here
}

You might also try playing around with arrow functions to see if it fixes this, since that was introduced to be bound to this in a more concrete way. Perhaps something like this:

fillData = ({ 
    must = this.chartData.distributionInitialData, 
    nice = this.chartData.distributionInitialData 
}) => {
    // any other code here
}

Vue.js default function parameter destructuring and 'this'

3 Answers3