我有一个Vue.js组件,它有一个数据变量,它是一个JSON对象,我已经创建了一个方法,可以通过键递归地轻松找到该对象中的项目。
这是:
getJsonItem(lookup, obj=this.cardInfo) {
for (item in obj) {
if (item == lookup) {
return obj[item];
} else if (obj[item] instanceof Object) {
getJsonItem(lookup, obj[item]);
}
}
},
现在,这在Vue JS之外的控制台中运行得非常好,但是当我尝试从Vue JS中运行它作为一种方法时,我得到一个" ReferenceError:item未定义"错误。
Vue JS中的变量范围是否存在一些有趣的事情阻止我引用'项目'在for循环中声明的变量?
我确定它可能很简单,我没有看到。
答案 0 :(得分:4)
您必须使用var
,let
或const
作为变量声明(在strict mode中):
for (const item in obj)
^^^^^
答案 1 :(得分:1)
首先,您必须使用关键字item
定义const
,以使其成为一个块范围变量。
接下来在递归调用之前添加this
。不要忘记在cardInfo
部分中定义data
。
您还希望遵守Vue linting标准(创建项目时使用ESLint),以便您应使用三等号并删除分号等。
尝试一下,它为我正确地将结果记录到控制台中:
data () {
return () {
cardInfo: [
// your data
]
}
},
methods: {
getJsonItem (lookup, obj = this.cardInfo) {
for (const item in obj) {
if (item === lookup) {
console.log(obj[item])
} else if (obj[item] instanceof Object) {
this.getJsonItem(lookup, obj[item])
}
}
}
},
mounted () {
this.getJsonItem('brand')
}
如果您在模板而不是脚本中调用方法,则无需在其之前添加this
。