title: How can I call method from data on vue.js?
body: <p>My vue component like this :</p>
  <pre class="lang-vue prettyprint-override"><code>&lt;template&gt;
    &lt;ul class=&quot;nav nav-tabs nav-tabs-bg&quot;&gt;
      &lt;li v-for=&quot;tab in tabs&quot; role=&quot;presentation&quot; :class=&quot;setActive(tab.url)&quot;&gt;
        &lt;a :href=&quot;baseUrl + tab.url&quot;&gt;{{tab.title}}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;      
  &lt;/template&gt;
      
  &lt;script&gt;
    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)
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>If the code run, there exist error like this :</p>
  <blockquote>
  <p>[Vue warn]: Error in data(): &quot;ReferenceError: strSlug is not defined&quot;</p>
  </blockquote>
  <p>If I console.log(window.location.pathname), the result like this :</p>
  <blockquote>
  <p>/store/21/chelsea-hazard-store</p>
  </blockquote>
  <p>So if it is the same as url with data in tabs, then it will active</p>
  <p>I call the strSlug method to convert each into lowercase and convert spaces into <code>-</code></p>
  <p>Seems it can not call the method from the data</p>
  <p>How can I solve the error?</p>