Access this / vm instance from props default (VueJS)

Question

I have a plugin that sets some variables to vue's object prototype.

I need to access these variables from a prop's default property. How can I achieve this?

Using the following example, webpack throws some undefined error.

//...
props: {
    size: {
        type: String,
        required: false,
        default: this.$myPlugin.size
    }
}

Can you provide install frunction of your plugin?

Andrew Vasylchuk
– Andrew Vasylchuk

2019-07-23 20:30:58 +00:00
Commented Jul 23, 2019 at 20:30 — Andrew Vasylchuk
– Andrew Vasylchuk, Commented Jul 23, 2019 at 20:30

ggorlen · Accepted Answer · 2022-07-29 04:50:08Z

13

For Vue 2, you can specify the default as a function that returns the default value. That should have access to the current instance as this.

props: {
    size: {
        type: String,
        required: false,
        default () {
            return this.$myPlugin.size
        } 
    }
}

The relevant line in the Vue source code is here if you're curious. Note that the function is explicitly called with vm as its this value.

edited Jul 29, 2022 at 4:50

ggorlen

59.4k8 gold badges119 silver badges173 bronze badges

answered Jul 23, 2019 at 20:30

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

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

3 Comments

Geo C. Over a year ago

Thanks. This works. Complete answer. They call it with the vm scope.

西門正 Code Guy - JingCodeGuy Over a year ago

Is this only working on plugin? I have tried on a child component props, it seems the vm(this) is not available and return undefined instead. -> Found the reason, because my props is also a function, vm is not available for props with type Function.

西門正 Code Guy - JingCodeGuy Over a year ago

For reference, for event functions as props, may put this in parameter so that the context become instance proxy for using _self to access vue instance. eg. this._self

Collectives™ on Stack Overflow

Access this / vm instance from props default (VueJS)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related