Question

我有一个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中运行它作为一种方法时，我得到一个＆＃34; ReferenceError：item未定义＆＃34;错误。

Vue JS中的变量范围是否存在一些有趣的事情阻止我引用＆＃39;项目＆＃39;在for循环中声明的变量？

我确定它可能很简单，我没有看到。

Answer 1

您必须使用var，let或const作为变量声明（在strict mode中）：

for (const item in obj)
     ^^^^^

Answer 2

首先，您必须使用关键字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。

Vue.js不能在方法中迭代对象

2 个答案: