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（）中出错：＆＃34; ReferenceError：未定义strSlug＆＃34;

如果我是console.log（window.location.pathname），结果如下：

/存储/ 21 /切尔西灾害店内

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

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

似乎无法从数据中调用方法

如何解决错误？

Answer 1

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

Answer 2

即使使用“ this”也不起作用。因为在初始化数据时尚未定义该功能。我认为您必须在created（）生命周期挂钩中做到这一点。

Answer 3

如果data中有一个将在另一个对象的上下文中使用的函数（例如，类似事件处理程序），则this将不会指向Vue实例。您必须将引用保留在data()范围内的另一个变量中：

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

如何从vue.js上的数据调用方法？

3 个答案: