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

【问题标题】：How can I call method from data on vue.js?如何从 vue.js 上的数据中调用方法？
【发布时间】：2018-04-08 13:35:22
【问题描述】：

我的 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方法将每个转换为小写，并将空格转换为-

好像不能从数据中调用方法

我该如何解决这个错误？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

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

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

【讨论】：

我一直在寻找这个在 vuetify 验证中实现 i18n（翻译）。它就像一个魅力。我快把我逼疯了。谢谢！ ....根据您的示例，我做了 self.$t('message') 并且它起作用了。

【解决方案2】：

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

【讨论】：

【解决方案3】：

即使使用“this”也不起作用。因为在初始化数据时尚未定义该函数。我认为您必须在 created() 生命周期挂钩中执行此操作。

【讨论】：