如何从 vue.js 上的数据中调用方法?
我的 vue 组件是这样的:
My vue component like this :
<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>
如果代码运行,就会出现这样的错误:
If the code run, there exist error like this :
[Vue 警告]:data() 中的错误:ReferenceError: strSlug 未定义"
[Vue warn]: Error in data(): "ReferenceError: strSlug is not defined"
如果我 console.log(window.location.pathname),结果是这样的:
If I console.log(window.location.pathname), the result like this :
/store/21/chelsea-hazard-store
/store/21/chelsea-hazard-store
因此,如果它与标签中的数据相同的url,那么它将处于活动状态
So if it is the same as url with data in tabs, then it will active
我调用strSlug方法将每个转换为小写,并将空格转换为-
I call the strSlug method to convert each into lowercase and convert spaces into -
好像不能从数据中调用方法
Seems it can not call the method from the data
我该如何解决这个错误?
How can I solve the error?
推荐答案
从 vue 对象中访问数据或方法时,使用 this.thing
.在你的情况下,那将是 this.strSlug(this.shop.name)
.
When accessing data or methods from within the vue object, use this.thing
. In your case, that would be this.strSlug(this.shop.name)
.
相关文章