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

时间:2017-12-12 05:34:10

标签: javascript methods vue.js vuejs2 scoping

我有一个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循环中声明的变量?

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

2 个答案:

答案 0 :(得分:4)

您必须使用varletconst作为变量声明(在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