【学一点儿前端】Bad value with message: unexpected token `.`. 问题及解决方法

问题

今天从vue3的项目copy一段代码到vue2项目,编译后访问页面报错了
在这里插入图片描述

Bad value with message: unexpected token `.`.

注意到错误字符‘.’,这个错误通常发生在处理 JavaScript 或者 HTML 中的动态表达式中,日常使用二分法不断缩小报错代码范围,最终锁定到这一行。

<view class="title"> {{ agreement[BANK_CODE]?.title }} </view>

注意到?.,可选链操作符
可选链是 ECMAScript 2020(ES2020)引入的新特性,因此它可能还不被vue2支持。因此我们需要避免使用他或者让项目变得支持使用。

解决方法1

使用计算属性来避免使用它

computed: {bankTitle() {return this.agreement[this.bankCode] ? this.agreement[this.bankCode].title : '';}
}
<view class="title"> {{ bankTitle }} </view>

解决办法2

直接给项目安装依赖,让项目支持使用可选链操作符,这个方法是从其它大佬那边学到的,方便在改动代码量大的时候用。
‘@babel/plugin-proposal-optional-chaining’, 是babel7用来解析js中的可选链运算符的;
‘vue-template-babel-compiler’,是用来解析vue模版中的可选链运算符;
使用’@babel/plugin-proposal-optional-chaining’

npm i @babel/plugin-proposal-optional-chaining

.babelrc中添加配置

{"presets": [],"plugins": [ "@babel/plugin-proposal-optional-chaining"],
}

使用’vue-template-babel-compiler’

npm i vue-template-babel-compiler

webpack中添加配置

module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {compilerOptions: {preserveWhitespace: false},compiler: require('vue-template-babel-compiler') // 解析可选链}},]},plugins: []

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/6848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript String indexOf() 方法

一、定义和用法&#xff1a; indexOf() 方法返回值在字符串中第一次出现的位置。 如果未找到该值&#xff0c;则 indexOf() 方法返回 -1。 indexOf() 方法区分大小写。 二、语法 string.indexOf(substring, start) 1、参数 substring必需。要搜索的字符串。start可选。开…

2024“天一永安杯“宁波第七届网络安全大赛极安云科战队部分WP

“天一永安杯”2024 宁波第七届网络安全大赛暨第九届大学生网络技术与信息安全大赛 大赛竞赛形式 一、线上初赛 参赛人员&#xff1a;各单位自行选拔3人&#xff08;设队长1名&#xff09;组成团队&#xff0c;不足3人不允许参赛。 竞赛时间&#xff1a;8&#xff1a;30-12&…

LLMs:《Better Faster Large Language Models via Multi-token Prediction》翻译与解读

LLMs&#xff1a;《Better & Faster Large Language Models via Multi-token Prediction》翻译与解读 目录 《Better & Faster Large Language Models via Multi-token Prediction》翻译与解读 Abstract 2、Method方法 Memory-efficient implementation 高效内存实…

IOS APP 常见UI控件

UILabel&#xff08;标签&#xff09;UITextField&#xff08;文本输入框&#xff09;UITextView&#xff08;文本视图&#xff09;UIButton&#xff08;按钮&#xff09;UIImageView&#xff08;图像视图&#xff09;UISwitch&#xff08;开关&#xff09;UIStepper&#xff0…

详解LLMOps,将DevOps用于大语言模型开发

大家好&#xff0c;在机器学习领域&#xff0c;随着技术的不断发展&#xff0c;将大型语言模型&#xff08;LLMs&#xff09;集成到商业产品中已成为一种趋势&#xff0c;同时也带来了许多挑战。为了有效应对这些挑战&#xff0c;数据科学家们转向了一种新型的DevOps实践LLM-OP…

python数据分析——在数据分析中有关概率论的知识

参数和统计量 前言一、总体二、样本三、统计抽样四、随机抽样4.1. 抽签法4.2. 随机数法 五、分层抽样六、整群抽样七、系统抽样八、统计参数九、样本统计量十、样本均值和样本方差十一、描述样本集中位置的统计量11.1. 样本均值11.2. 样本中位数11.3. 样本众数 十二、描述样本分…

windows和linux生成代码patch补丁

windows和linux生成代码patch补丁 如需转载请标明出处&#xff1a;http://blog.csdn.net/itas109 文章目录 windows和linux生成代码patch补丁前言1. .patch补丁2. 差异文件按目录结构导出到文件夹问题1. "Hunk #1 FAILED at 1 (different line endings)" 环境&#…

K8S 哲学 - 服务发现 services

apiVersion: v1 kind: Service metadata:name: deploy-servicelabels:app: deploy-service spec: ports: - port: 80targetPort: 80name: deploy-service-podselector: app: deploy-podtype: NodePort service 的 endPoint &#xff08;ep&#xff09; 主机端口分配方式 两…

【银角大王——Django课程——靓号页面的基本操作(列表,新建,删除)】

靓号管理 靓号列表显示表结构根据表结构的需求&#xff0c;在models.py中创建类URL.py编写views.py中 函数编写列表显示HTML页面效果 新建靓号编写&#xff08;添加&#xff09;URL.py编写views.py中 函数编写新建靓号HTML数据校验方式一&#xff1a;&#xff08;正则表达式&am…

微信IDE vscode插件:获取插件位置,并打开文件

背景 有没有觉得在微信开发工具里面添加一些插件可以很方便。因为微信IDE的编辑本身是依赖vscode开发&#xff0c;所以编写vscode插件自然可以在微信IDE使用。这样做好处就是可以满足到自己一些开发使用习惯。 1.获取插件的目录位置 那么如何获取插件里面的目录&#xff0c;…

MongoDB:非关系型数据库的翘楚

MongoDB&#xff1a;非关系型数据库的翘楚 文章目录 MongoDB&#xff1a;非关系型数据库的翘楚一、引言二、MongoDB简介三、MongoDB的特点四、MongoDB的应用场景五、MongoDB的使用方法1.安装和配置1.下载MongoDB安装包2.解压安装包3.创建数据目录和日志文件4.配置环境变量5.启动…

运维各种中间件的手动安装(非常详细)

压缩文件夹 tar -zcvf newFolder.tar.gz oldFolder 把oldFolder文件夹压缩成newFolder.tar.gz解压文件夹 tar -zxvf 压缩文件名.tar.gzlinux安装jdk &#xff08;参考 https://blog.csdn.net/qq_42269466/article/details/124079963 &#xff09; 1、创建目录存放jdk包 mkd…

【AI】openai-quickstart 运行Jupyter Lab

openai-quickstart/openai_api /README-CN.md 【AI】指定python3.10安装Jupyter Lab 可以安装3.10版本的jupyter lab 但是直接输入命令无法启动 突然发现自己电脑2023年安装过anaconda3 C:\ProgramData\anaconda3\python.exe C:\ProgramData\anaconda3\cwp.py C:\ProgramData…

css基础之显示模式、背景、三大特性

显示模式、背景 一、元素显示模式 1.块级元素 独占一行&#xff0c;例如div,p&#xff0c;hr,h1-h6,ul,ol,form,table 可以设置高度宽度&#xff0c;外边距&#xff0c;内边距 宽度默认容器宽度 里面可以放行内或块级元素 注意&#xff1a; 文字类元素不能使用块级元素 <…

Ajax的请求方式

1 get 1 $.get() //通过远程Http Get请求载入信息 $.get("请求地址",{id:1;name:"一一"},function(data) {//请求成功执行的代码写在这里 }) //或者直接拼接参数 $.get("请求地址?id"id"&name"name,function(data) {//请求成功…

[ARM系列]coresight(一)

原文链接 目的&#xff1a;对复杂SOC实现debug和trace的架构 典型环境 包含&#xff1a;2个ARM core&#xff0c;一个DSP&#xff0c;众多coresight组件 coresight组件实现对core、DSP的debug和trace功能 环境中包含3个通路 trace通路&#xff1a;将core和DSP内部信息输出到…

跨域问题(服务器和浏览器之间)待补充

一、为什么产生&#xff1a; 同源策略&#xff08;域名&#xff0c;协议&#xff0c;端口&#xff09;&#xff0c;安全问题 二、怎么解决&#xff1a; 1、cros:修改响应头 2、jp&#xff1a;采用js标签 3、代理&#xff08;创建服务器&#xff0c;定义规则&#xff0c;服…

JVM笔记3-经典的垃圾收集器

上图展示了7种&#xff0c;适用于不同分代中的收集器。如果两者之间由连线&#xff0c;说明可以搭配使用。 PS&#xff1a;在JDK8中将SerialCMS和ParNewSerial Old的组合声明为废弃&#xff0c;并且在JDK9中完全取消了这两种组合的支持。 1、Serial收集器 Serial收集器是JVM中…

C++:重写和重载

重写&#xff08;Override&#xff09;和重载&#xff08;Overload&#xff09;是面向对象编程中常用的两个概念&#xff0c;它们虽然都涉及到方法的定义&#xff0c;但是在实现和使用上有着不同的特点。 重写&#xff08;Override&#xff09;&#xff1a; 重写是指在子类中重…

js开启子线程及其使用

众所周知&#xff0c;js是单线程&#xff0c;但是可以开启子线程来帮忙处理一些数据&#xff0c;但是这个子线程是有限制的 1.必须是同源 2.完全受主线程控制 3.不能在子线程中操作dom节点 4.子线程没有window&#xff0c;可以使用self 5.等等 具体的查看官网 进程切换是要耗时…