How can I call method from data on vue.js?

Question

My vue component like this :

<template>
    ...
        <ul class="nav nav-tabs nav-tabs-bg">
            <li v-for="tab in tabs" role="presentation" :class="setActive(tab.url)">
                <a :href="baseUrl + tab.url">{{tab.title}}</a>
            </li>
        </ul>
    ...
</template>

<script>
    export default {
        props: ['shop'],
        data() {
            return{
                tabs: [
                    {
                        title: 'product',
                        url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name)
                    },
                    {
                        title: 'info',
                        url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name) + '/info'
                    }
                ]
            }
        },
        methods: {
            setActive(pathname){
                return {active: window.location.pathname == pathname}
            },
            strSlug: function(val) {
                return _.kebabCase(val)
            }
        }
    }
</script>

If the code run, there exist error like this :

[Vue warn]: Error in data(): "ReferenceError: strSlug is not defined"

If I console.log(window.location.pathname), the result like this :

/store/21/chelsea-hazard-store

So if it is the same as url with data in tabs, then it will active

I call the strSlug method to convert each into lowercase and convert spaces into -

Seems it can not call the method from the data

How can I solve the error?

Solution 1

When accessing data or methods from within the vue object, use this.thing. In your case, that would be this.strSlug(this.shop.name).

Solution 2

If you have a function in data that will be used in a context of another object (like an event handler, for example), then this will not point to the Vue instance. You will have to preserve the reference in another variable from the scope of data():

methods: {
    shuffle() {}
},
data() {
    var self = this;
    return {
        onClick: function() {
            self.shuffle()
        }
    }
}

Solution 3

Does not work even with 'this.' because that function has not been defined at the time data is being initialized. I think you have to do it in the created() life-cycle hook.

Comments

[user4504661]

I was looking for this to implement i18n (translation) in vuetify validation. It worked like a charm. I was driving me crazy. Thank You! .... based on your example i did self.$t('message') and it worked.