I have a simple ponent that uses mixin that's shared across multiple ponents with similar functionality.

When I run it I seem to be getting

Property or method "activeClass" is not defined on the instance but referenced during render.

Here's my mixin

<script>
    export default {
        data() {
            return {
                opened: false,
                identity: ''
            }
        },
        puted: {
            activeClass() {
                return {
                    active: this.opened
                };
            }
        },
        created() {
            window.EventHandler.listen(this.identity + '-toggled', opened => this.opened = opened);
        },
        methods: {
            toggle() {
                window.EventHandler.fire('toggle-' + this.identity);
            }
        }
    }
</script>

and my ponent

<template>
    <span class="pointer" :class="activeClass" @click="toggle"><i class="fas fa-search"></i></span>
</template>
<script>
    import Trigger from '../../mixins/Trigger';
    export default {
        data() {
            return {
                mixins: [Trigger],
                data() {
                    return {
                        identity: 'language'
                    }
                }
            }
        }
    }
</script>

For some reason I cannot seem to be able to access activeClass puted property from within the ponent. Any idea why is this happening?

I have a simple ponent that uses mixin that's shared across multiple ponents with similar functionality.

When I run it I seem to be getting

Property or method "activeClass" is not defined on the instance but referenced during render.

Here's my mixin

<script>
    export default {
        data() {
            return {
                opened: false,
                identity: ''
            }
        },
        puted: {
            activeClass() {
                return {
                    active: this.opened
                };
            }
        },
        created() {
            window.EventHandler.listen(this.identity + '-toggled', opened => this.opened = opened);
        },
        methods: {
            toggle() {
                window.EventHandler.fire('toggle-' + this.identity);
            }
        }
    }
</script>

and my ponent

<template>
    <span class="pointer" :class="activeClass" @click="toggle"><i class="fas fa-search"></i></span>
</template>
<script>
    import Trigger from '../../mixins/Trigger';
    export default {
        data() {
            return {
                mixins: [Trigger],
                data() {
                    return {
                        identity: 'language'
                    }
                }
            }
        }
    }
</script>

For some reason I cannot seem to be able to access activeClass puted property from within the ponent. Any idea why is this happening?

• javascript
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

Try to move mixin to ponents main scope. Not in data function rerurn