Vue 在template中写可选链操作报错

昨天发现一个问题困扰许久所以打算记录下来📝

场景：在vue项目中，template中直接使用可选链操（?.）作符会报错。

解决方案：

自行封装一个可选链方法，然后挂载到全局

1.在项目的utils目录下的util.js文件中封装一个方法。（没有的话就新建）

export function variableJudge(obj, keyName) {
  if (!obj) return null
  let keys = (keyName + '').split('.')
  let tempObj = obj
  for (let i = 0; i < keys.length; i++) {
    if (!tempObj) return
    if (keys[i] !== '') tempObj = tempObj?.[keys[i]]
  }
  return tempObj
}

2.在项目的main.js文件中导入这个方法并且挂载到全局。

3.然后在页面中直接使用即可。

$chaincle(product.name,".num")
//上面代码就等同于product.name?.num