Passing a prop to a vuejs mixin but property is undefined Passing a prop to a vuejs mixin but property is undefined vue.js vue.js

Passing a prop to a vuejs mixin but property is undefined


You can workaround by accessing these properties from the component as if the mixing is the component.To make the property 'dynamic', you can pass the name of the field you need to access inside the mixin.Like this:

function myMixin(propName) {  return {    computed: {      mixinComputed () {        return this[propName] + 'somethingElse';      }    }  };}

If you want to pass an inner property of an object, like 'user.name' to the mixin, you can create a computed on the outer component or, make it inside the mixin itself:

function myMixin(propName1, propName2) {  return {    computed: {      mixinComputed () {        return this.parsedPropValue1 + this.parsedPropValue2;      },      parsedPropValue1 () {        return this.parsePath(propName1);      },      parsedPropValue2 () {        return this.parsePath(propName2);      }    },    methods: {      parsePath(path) {        if (!path)         return;        const split = path.split('.');        return split.reduce((acc, curr) => acc && acc[curr], this);      }    }  };}

Usage:

mixins: [myMixin('user.address.street', 'obj')]


It is not possible to dynamically pass parameters to Vue mixins.

However you can use this functional approach as an alternative:

 function BarMixin(param) {  return {    data() {      return {       ....      }    }    // your mixin code  } }