如何從 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 警告]：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) 。

Answer 2

如果data中有一個函數將在另一個對象的上下文中使用（例如事件處理程序），那么this將不會指向 Vue 實例。 您必須在data()范圍內的另一個變量中保留引用：

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

Answer 3

即使使用“this”也不起作用。 因為在初始化數據時尚未定義該函數。 我認為您必須在 created() 生命周期掛鈎中執行此操作。