vue.jsのデータからメソッドを呼び出すにはどうすればよいですか？

Question

私のvueこのようなコンポーネント：

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

コードを実行すると、次のようなエラーが発生します。

[Vue warn]：data（）のエラー：「ReferenceError：strSlugが定義されていません」

私がconsole.log（window.location.pathname）の場合、このような結果：

/ store/21/chelsea-hazard-store

したがって、タブにデータがあるurlと同じ場合、アクティブになります

StrSlugメソッドを呼び出して、それぞれを小文字に変換し、スペースを-に変換します

データからメソッドを呼び出せないようです

どうすればエラーを解決できますか？

Answer 1

vueオブジェクト内からデータまたはメソッドにアクセスする場合は、_this.thing_を使用します。この場合、this.strSlug(this.shop.name)になります。