Vue项目调用工具方法触发点击事件报错：item未定义

我一眼就定位到问题根源了——你的工具方法里的循环变量item没有用let/const声明，导致它变成了全局变量，在Vue的事件处理作用域里引发了冲突！

问题原因 #

你写的for(item in obj2)没有给item添加变量声明，在非严格模式下JS会自动把它提升为全局变量。但Vue的事件处理函数运行在组件的作用域中，当点击事件触发时，这个全局的item可能被意外覆盖或者作用域解析出错，最终抛出ReferenceError。

修复后的工具方法代码 #

只需要给item加上let声明，把它的作用域限制在循环内部即可：

util.fillup_obj1_value_with_obj2_value = function(obj1, obj2) {
  for(let item in obj2) {
    obj1.hasOwnProperty(item) ? obj1[item] = obj2[item] : ''
  }
}

额外优化建议 #

你代码里的三元表达式空字符串分支意义不大，换成更直观的if判断会让代码可读性更好：

util.fillup_obj1_value_with_obj2_value = function(obj1, obj2) {
  for(let item in obj2) {
    if(obj1.hasOwnProperty(item)) {
      obj1[item] = obj2[item]
    }
  }
}

这样不仅逻辑清晰，还避免了不必要的表达式计算。

内容的提问来源于stack exchange，提问作者sof-03