Vue.js无法在方法中迭代对象

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中运行它作为方法时，我得到一个“ReferenceError：item is not defined”错误。

在Vue JS中变量的范围是否有一些有趣的事情阻止我引用在for循环中声明的'item'变量？

我敢肯定这可能是我看不到的简单事情。

Answer 1

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

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

Answer 2

首先，您必须使用关键字qazxsw poi定义qazxsw poi，以使其成为块范围变量。

接下来在递归调用之前添加item。不要忘记在const部分定义this。

您还希望坚持使用Vue linting标准（我在创建项目时使用ESLint），这样您就可以使用三等分并删除分号等。

试试这个，它正确地将结果记录到控制台中：

cardInfo

如果您在模板中调用方法而不是脚本，则不需要在它之前添加data。