Comment puis-je appeler une méthode à partir de données sur vue.js?

Question

Mon composant vue comme ceci:

<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>

Si le code s'exécute, il existe une erreur comme celle-ci:

[Vue warn]: Erreur dans data (): "ReferenceError: strSlug n'est pas défini"

Si je console.log (window.location.pathname), le résultat comme ceci:

/ magasin/21/chelsea-hazard-store

Donc, si c'est la même chose que l'URL avec des données dans les onglets, alors il sera actif

J'appelle la méthode strSlug pour convertir chacun en minuscules et convertir les espaces en -

Semble qu'il ne peut pas appeler la méthode à partir des données

Comment puis-je résoudre l'erreur?

Answer 1

Lorsque vous accédez à des données ou des méthodes à partir de l'objet vue, utilisez this.thing. Dans votre cas, ce serait this.strSlug(this.shop.name).