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

简介: 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>

a23c3a0f99fc43b4b2896ece2da2667f.png

在 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>


c321dcaf3f564823ae54563f1d172563.png



解决

这个问题主要是 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


cf62b64125f7417684c4de741fccbe9d.png


然后通过 nvm 工具切换版本到 14.0.0,nvm 工具的使用可以参考我之前的博客:怎么使用 nvm 控制 nodejs 版本切换?dfc8fc6fa1734eb79f94719d9c79dc29.png


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


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

<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>


ea02ba2ff5f74370b76c32806db92fed.png


注意问题

一定要确定好 vue 版本的问题,可以去依赖里面看看版本,2.7.10 我也测试了一下,也是可行的


26ccd50ff02145dfa7147b5b6acaa67c.png


另外就是版本的问题了:node.js模块依赖及版本号


43a1832c23a0484da9e1fd29d7f30249.png



目录
相关文章
|
23小时前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
19 11
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
10 2
|
6天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表