如何从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]: Error in data(): "ReferenceError: strSlug is not defined"

如果我 console.log(window.location.pathname)，结果如下 ：

/store/21/chelsea-hazard-store

所以，如果它与选项卡中的数据相同，则会激活

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

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

我该如何解决这个错误？

- samuel toh

Answer 1

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

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

- gvlasov

---

我在寻找这个来实现 Vuetify 验证的国际化（翻译）功能。它完美地发挥了作用，让我感到非常高兴。根据您的示例，我使用了 self.$t('message')，它也奏效了。非常感谢！ - user4504661

Vue在创建数据时仅调用data()一次。之后，Vue使用$data属性管理data()的返回值。因此，在data()中不需要将其替换为self，因为从事件处理程序等未调用data()。正如The Guy with the Hat所回答的，只需将this附加到strSlug即可。同样，在方法的定义中也不需要将其替换为self。 - Jun1s

Answer 2

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

- The Guy with The Hat

Answer 3

即使使用'this.'也无法正常工作，因为在数据初始化时该函数尚未被定义。我认为您必须在created()生命周期钩子中执行它。

- Brobic Vripiat