vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i-阿里云开发者社区

vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i

2023-02-24 1280

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i

问题

我使用的node 版本是 12.13.0，vue 版本是 2.6.11，在 vue template 里使用可选链操作符( ?. )报错如下：

<template>
    <div id="app">
        <h1>可选链操作符</h1>
        <div>{{testObj?.blog1?.name}}</div>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            testObj: {}
        }
    },
    mounted() {
        this.testObj = {
            blog: {
                name: "kaimo313"
            }
        }
    },
};
</script>

在 script 里添加是不报错的

<template>
    <div id="app">
        <h1>可选链操作符</h1>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            testObj: {
                blog: {
                    name: "kaimo313"
                }
            }
        }
    },
    created() {
        console.log("blog1--->", this.testObj?.blog1?.name)
        console.log("name1--->", this.testObj?.blog?.name1)
        console.log("kaimo313--->", this.testObj?.blog?.name)
    }
};
</script>

解决

这个问题主要是 vue 2.6.11 template 不支持可选链操作符，在可以升级 vue 版本的情况下，我们可以升级到 2.7.0 版本，同时 node 版本升级到 14.0.0。

npm i vue@2.7.0 vue-template-compiler@2.7.0

然后通过 nvm 工具切换版本到 14.0.0，nvm 工具的使用可以参考我之前的博客：怎么使用 nvm 控制 nodejs 版本切换？

大家也可以测试其他的版本，我试了一下 14.0.0以上的几种版本都是可以的，安装切换完版本，然后运行服务，即可

页面也可以正常展示了：我们加一行代码：

<template>
    <div id="app">
        <h1>kaimo test 可选链操作符</h1>
        <div>{{testObj?.blog1?.name}}</div>
        <h2>{{testObj?.blog?.name}}</h2>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            testObj: {}
        }
    },
    mounted() {
        this.testObj = {
            blog: {
                name: "kaimo313"
            }
        }
    },
};
</script>