I have this mixin:

export default {
    computed: {
        headerValues: function () {
            return this.headers.map(header => header.value);
        }
    },
    methods: {
        getTextAlignment(headerValue) {
            const header = this.headers.find(header => header.value === headerValue);

            return header.align
                ? `text-${header.align}`
                : '';
        },
    }
};

The method and the computed property depend on a field called headers. Now I have two components that use that mixin, but in one of them, headers is a prop and in the other, a computed property.

I would like to, somehow, make this mixin self-contained, so its methods doesn't depend on a field that the user may forget to declare. This is somewhat a diffuse question, but what I want to achieve is a mixin with a well-defined interface, that doesn't have it's functionality splitted between those components that import it and itself. Any ideas?

0

There are 0 answers