Vue inline template not finding methods or data

Normally using Vue as an out of the box solution with Laravel so it just 'works'.

I am adding it now to a WordPress build but have an issue with an inline template.

Every looks fine, but it will not do anything in the mounted method and says that any data or methods are undefined, almost likes its not properly loading the component.

Here is the basic HTML:

<tabbed-panels class="component tabPanels" inline-template>
    <div>
        <div class="tabPanels__controls-control" v-on:click="changeTab(1)"></div>
    </div>
</tabbed-panels>

tabbed-panels.js:

export default {
    data() {
        return {
            activeTab: null
        }
    },
    methods: {
        changeTab(id) {
            this.activeTab = id;
        }
    },
    ready() {
        console.log('foo');
    } 
}

Import statement:

Vue.component('tabbed-panels', require('./tabbed-panels.js'));

Any idea where this could be going wrong? Normal single file .vue components work fine but not possible for the content.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.