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),이 같은 결과를 :이 탭에서 데이터 URL과 동일 그렇다면

/store/21/chelsea-hazard-store

, 그것은 것입니다 활성

나는 소문자로 각각 변환 -

로 공간을 변환하는 strSlug 방법

가 어떻게 오류를 해결할 수 는 데이터

에서 메소드를 호출 할 수 없습니다 보인다 전화?

Answer 1

vue 객체 내에서 데이터 나 메소드에 액세스 할 때 this.thing을 사용하십시오. 귀하의 경우는 this.strSlug(this.shop.name)입니다.