Is there any way for me to access a global property from my vue instance when setting a default prop value in my component?
I would like to do this
props: {
id: {
type: String,
default: this.$utils.uuid
}
}
I also tried wrapping it in an arrow function withous success
props: {
id: {
type: String,
default: () => this.$utils.uuid
}
}
I don't think that this can be achievable the way you want it. This is because props is an object and are common between components instances. The solution you have is either using a global $utils or using an internal data item instead of using directly the prop id in your component:
Using an internalId data item:
export default {
props: {
id: {
type: String,
default: null
}
},
data () {
return {
internalId: this.id || this.$utils.uuid
}
}
}
Using the global Vue object
(this solution depends on how you register your utils plugin:
import Vue from 'vue'
export default {
props: {
id: {
type: String,
default: Vue.$utils.uuid // Depends on how you registered your plugin
}
}
}