vuecli中配置可選鏈操作符兼容

// 安裝依賴  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  //可選鏈 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  //空值合併 ??
  ]
}

 

針對template模板中使用可選鏈操作符的辦法：

const chaining = {
    install(vue) {
        const optionalChaining = (obj, ...rest) => {
            let tmp = obj;
            for (let key in rest) {
                let name = rest[key];
                tmp = tmp?.[name];
            }
            return tmp || "";
        }
        // 添加實例方法
        vue.prototype.$$= optionalChaining
    }
}

export default chaining

在main.js中引入

import chaining from "@/plugins/chaining";
Vue.use(chaining)

在<template>中使用的時候：{{$$(obj, 'first', 'second') }}