如何从 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]: data() 错误：“ReferenceError: strSlug 未定义”

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

/store/21/切尔西危险商店

因此，如果它与选项卡中带有数据的 url 相同，那么它将处于活动状态

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

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

我该如何解决错误？

原文由 samuel toh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 The Guy with The Hat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 gvlasov 发布，翻译遵循 CC BY-SA 4.0 许可协议