如何从 vue.js 上的数据中调用方法? [英] How can I call method from data on vue.js?

问题描述

我的 vue 组件是这样的:

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 警告]:data() 中的错误:ReferenceError: strSlug 未定义"

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

如果我 console.log(window.location.pathname)，结果是这样的:

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

/store/21/chelsea-hazard-store

/store/21/chelsea-hazard-store

因此，如果它与标签中的数据相同的url，那么它将处于活动状态

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

我调用strSlug方法将每个转换为小写，并将空格转换为-

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?

推荐答案

从 vue 对象中访问数据或方法时，使用 this.thing.在你的情况下，那将是 this.strSlug(this.shop.name).

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

这篇关于如何从 vue.js 上的数据中调用方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！