当前位置： 首页 > news >正文

TypeError: Cannot read properties of undefined (reading ‘scrollIntoView‘)（已解决）

news 文章来源：https://blog.csdn.net/m0_73756108/article/details/141254480 2024/9/20 8:59:03

问题复现：眨眼睛使用vite+vue3实现跳转dom功能时使用了scrollIntoView方法，在打包上传以后使用该功能报错

小友可能会陷入误区，以为是函数方法有问题，毕竟在开发时是没有问题的，
而实际上呢问题出在获取节点失败了

在这里眨眼睛是使用ref绑定获取了个节点数组

在这里插入图片描述

如果小友是这样绑定获取节点的，并且直接在这个vue里使用出现了问题，请另寻基本用法或生命周期的文章尝试，这不是本文遇到的问题

眨眼睛的问题在于使用pinia绑定在store时为直接解构，导致绑定的响应式丢失,也就说你用于绑定节点的根本就不是ref类型

解决方法:

在这里插入图片描述
其实pinia是为我们提供了不丢失响应式的解构方法的（记得引入），我们只需要套一层即可

小结：刚开始使用vue3+pinia开发时常常不是很注重响应式丢失这件事，有的响应式丢失了在开发环境也能用，但打包以后就不行了，有更甚，响应式只响应数据增加不响应数据删除的情况，颇为费解，小友们在使用过程中建议规范使用，避免不必要的问题

相关文章：

TypeError: Cannot read properties of undefined (reading ‘scrollIntoView‘)（已解决）

问题复现：眨眼睛使用vitevue3实现跳转dom功能时使用了scrollIntoView方法，在打包上传以后使用该功能报错 小友可能会陷入误区，以为是函数方法有问题，毕竟在开发时是没有问题的， 而实际上呢问题出在获取节点失败了 在这…...

编程日记 2024/8/19 18:09:21

【解决】Unity Inspector 视窗脚本中文乱码问题

开发平台：Unity 2020 编程平台：Visual Studio 2022   问题描述 开发过程中，为便利化快速审阅代码内容，通过 Unity Inspector 确认代码内容与逻辑。但对于默认安装的 Visual Studio 编程平台，保存的 UTF- 8 脚本文件在…...

编程日记 2024/8/19 18:07:19

使用 C/C++访问 MySQL

目录 准备工作 尝试链接 MySQL Client MySQL 接口介绍 准备工作 保证 MySQL 服务有效。下载MySQL开发包（可以在MySQL官网下载安装也可以在软件源安装） MySQL 开发包通常会包含一些特定的头文件和库文件。您可以检查以下常见的路径： /us…...

编程日记 2024/8/19 18:02:13

Linux 网络套接字解析：实现网络通信

目录 一.网络基础1.协议2.OSI与TCP/IP模型3.网络通信流程4.IP与Mac地址 二.网络编程套接字1.端口号2.网络字节序3.tcp、udp协议4.socket编程5.sockaddr结构解析6.实现Udp_socket7.实现Windows与Linux通信8.Linux下远程执行指令9.实现tcp_socket10.守护进程 一.网络基础 1.协议…...

编程日记 2024/8/19 17:58:09

vue3 组合式API

<!-- 深度监听 deep 点击按钮控制台&#xff0c;才输出count变化了: 1, 老值: 0;否则控制台不输出 --> <script setup>import { ref,watch } from vueconst state ref({count:0})const setCount () > {state.count.value}watch(state, () > {console.log(…...

编程日记 2024/8/19 17:57:08

二、什么是Vue中的响应式？Vue的响应式原理

什么是Vue中的响应式 Vue中的响应式&#xff0c;简而言之就是当数据发生变化时&#xff0c;页面跟随变化。使用过Vue的v-model都有比较深刻的感受&#xff0c;我们在代码中修改双向绑定的数据后&#xff0c;页面上的数据也会自动更新&#xff0c;页面跟随变化 我们看个例子&am…...

编程日记 2024/8/19 17:56:07

快9月了才开始强化，跟张宇还是武忠祥？

快9月了才开始强化&#xff0c;跟张宇还是武忠祥&#xff01; 说真的&#xff0c;我也替这位同学着急&#xff0c;但是考研数学越是进度慢&#xff0c;就越不能急&#xff01;急着赶进度&#xff0c;容易出事&#xff01;遇到这个问题的朋友肯定不止一位&#xff0c;那我就帮大…...

编程日记 2024/8/19 17:54:05

SSM好易学学习平台---附源码92142

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设好易学学习平台。本文…...

编程日记 2024/8/19 17:53:04

对于mp4 ios和mac safari不能播放问题处理

直接对原mp4文件进行重新转码就可以了 ffmpeg -i origin.mp4 -vcodec h264 -profile:v high -level 4.1 orgin_hl.mp4 原因源文件不符合苹果基本规则 苹果官网文档...

编程日记 2024/8/19 17:52:02

开发同城交友找搭子系统app前景分析

开发同城交友系统APP的背景 社交需求多样化&#xff1a; 随着城市化的加速和人们生活节奏的加快&#xff0c;现代人的社交圈子往往较为狭窄&#xff0c;难以结识新朋友。传统的线下交友方式受限于时间、地点等因素&#xff0c;难以满足现代人对于交友的多样化需求。互联网和智…...

编程日记 2024/8/19 17:51:01

faiss向量数据库测试《三体》全集，这家国产AI加速卡，把性能提了7倍！

在人工智能和机器学习技术的飞速发展中&#xff0c;向量数据库在处理高维数据方面扮演着日益重要的角色。近年来&#xff0c;随着大型模型的流行&#xff0c;向量数据库技术也得到了进一步的发展和完善。 向量数据库为大型模型提供了一个高效的数据管理和检索平台&#xff0c;…...

编程日记 2024/8/19 17:49:59

负载均衡---相关概念介绍（一）

负载均衡&#xff08;Load Balance&#xff09;是集群技术的一种重要应用&#xff0c;旨在将负载&#xff08;工作任务&#xff09;进行平衡、分摊到多个操作单元上进行运行&#xff0c;从而提高系统的并发处理能力、增加吞吐量、加强网络处理能力&#xff0c;并提供故障转移以…...

编程日记 2024/8/19 17:47:57

计算机基础知识复习8.14

子线程抛异常主线程能否catch 在不做任何处理的情况下&#xff0c;主线程不能catch 解决方式&#xff1a; 子线程使用try catch来捕获异常 为线程设置未捕获异常处理器UncaughtExceptionHandler 通过future的get方法捕获异常 JVM相关参数 显示指定堆内存-Xms和-Xmx指定最…...

编程日记 2024/8/19 17:45:54

【io深层理解】

io深层理解 1.内核态2.用户态3. select IO多路复用执行原理4. select io多路复用限制和不足 1.内核态 一个进程会涉及多文件的修改&#xff0c;比如说。那么在内核态就会维护一个表&#xff0c;这个表叫文件描述符bitmap&#xff0c;这个表会传递给内核态&#xff0c;当然肯定传…...

编程日记 2024/8/19 17:43:51

【懒人工具】指定新文件，替换全盘旧文件

没辙&#xff0c;就是懒 最近在调整.clang-format&#xff0c;这个format文件要跟着项目走&#xff0c;只换本地默认的还不够。调整好以后一个项目一个项目的换&#xff0c;有时候会漏掉&#xff0c;索性全盘一次性换完。 基于自己操作的流程&#xff0c;写了个脚本&#xff0…...

编程日记 2024/8/19 17:42:48

React+Vis.js（02）：设置节点样式

文章目录 1、修改vis.js的节点和关系颜色2、修改vis.js节点的字体颜色2.1 统一设置节点字体颜色2.2 自定义某个节点的字体颜色3、设置vis.js节点的边框颜色和宽度3.1 设置单个节点3.2 统一设置1、修改vis.js的节点和关系颜色 在vis.js中，可以通过color属性，来给node节点添加…...

编程日记 2024/8/19 17:41:47

3G网络要彻底没了

2月21日，三大运营商公布了最新的用户数据，移动联通电信三家5G套餐用户数合计超过了7.5亿。信通院早前公布的数据显示，一月份，国内市场5G手机出货量2632.4万部，占同期手机出货量的79.7%。 这两项数据，说明我们已经进入到了5G时代，5G的普及速度远超很多人的想象。就在5G逐…...

编程日记 2024/8/19 17:40:45

如何配置ESXI主机的IP地址管理

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…...

编程日记 2024/8/19 17:38:43

软件测试学习笔记丨测试用例设计方法

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/31921 一&#xff0c;黑盒测试方法论 1&#xff0c;等价类 1.1 定义 等价类划分是一种重要的、常用的黑盒测试方法不需要考虑程序的内部结构&#xff0c;只需要考虑程序的输入规格即可它将…...

编程日记 2024/8/19 17:37:41

MinIO基本用法

在现代云计算和大数据领域&#xff0c;对象存储因其可扩展性、可靠性和低成本成为数据存储的重要选择。MinIO作为一个高性能、分布式的对象存储系统&#xff0c;凭借其开源、简单易用以及与Amazon S3兼容的特性&#xff0c;在业界得到了广泛的应用。本文将带您了解MinIO的基本用…...

编程日记 2024/8/19 17:36:40

MySQL windows版本安装

一、下载MySQL安装包 访问MySQL官网&#xff1a;首先&#xff0c;访问MySQL的官方网站&#xff08;MySQL&#xff09;&#xff0c;或者更具体地&#xff0c;访问MySQL的下载页面&#xff08;MySQL :: Download MySQL Community Server&#xff09;。 选择适合的版本&#xff1…...

编程日记 2024/8/19 17:35:38

Python实现人脸轮廓提取

目录 一、背景知识1.1 人脸检测和轮廓提取的意义1.2 人脸检测方法概述1.3 轮廓提取方法概述二、常用的人脸轮廓提取方法2.1 基于边缘检测的轮廓提取2.2 基于形态学操作的轮廓提取2.3 基于特征点检测的轮廓提取三、Python实现人脸轮廓提取3.1 安装依赖库3.2 使用Dlib进行人脸检测…...

编程日记 2024/8/19 17:31:33

Prettier+Vscode setting提高前端开发效率

文章目录 前言Prettier第一步&#xff1a;下载依赖&#xff08;团队合作&#xff09;或下载插件&#xff08;独立开发&#xff09;第二步&#xff1a;添加.prettierrc.json文件**以下是我使用的****配置规则** 第三步&#xff1a;添加.prettierignore文件**以下是我常用的****配…...

编程日记 2024/8/19 17:28:29

YOLOv10实时端到端目标检测

文章目录 前言一、非极值大抑制(NMS)二、NMS算法的具体原理和步骤三、YOLOV10创新点四、YOLOv10使用教程五、官方github地址 前言 距离上次写YOLOv5已经过去了两年&#xff0c;正好最近用YOLOv10重构了项目&#xff0c;总结下YOLOv10。 YOLOv10真正实时端到端目标检测&#xff…...

编程日记 2024/8/19 17:25:24

Java中的Annotation注解

常用注解 override&#xff1a;重写方法deprecated&#xff1a;弃用SuppressWarnings&#xff1a;抑制编译器警告 元注解&#xff08;注解的注解&#xff09; Target&#xff1a;描述注解所能修饰的类型Retention&#xff1a;描述注解的生命周期&#xff08;SOURCE源代码、C…...

编程日记 2024/8/19 17:21:19

小五金加工：细节决定产品质量与性能

在小五金加工领域&#xff0c;细节往往决定着最终产品的质量、性能以及市场竞争力。看似微不足道的细微之处&#xff0c;实际上蕴含着巨大的影响。时利和将介绍小五金加工中细节的重要性。 首先&#xff0c;细节关乎产品的精度。小五金零件通常尺寸较小&#xff0c;但对精度的要…...

编程日记 2024/8/19 17:20:16

VS Code安装配置ssh服务结合内网穿透远程连接本地服务器详细步骤

文章目录 前言1. 安装OpenSSH2.VS Code配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…...

编程日记 2024/8/19 17:18:13

世界首位「AI科学家」问世！独立生成10篇学术论文! 横扫「顶会」？

大家好&#xff0c;我是 Bob! &#x1f60a; 一个想和大家慢慢变富的 AI 程序员&#x1f4b8; 分享 AI 前沿技术、项目经验、面试技巧! 欢迎关注我&#xff0c;一起探索&#xff0c;一起破圈&#xff01;&#x1f4aa; AI科学家出世 最近一位人工智能AI科学家横空出世。 它是…...

编程日记 2024/8/19 17:17:12

【高阶数据结构】图

图 1. 图的基本概念2. 图的存储结构2.1 邻接矩阵2.2 邻接表2.3 邻接矩阵的实现2.4 邻接表的实现 3. 图的遍历3.1 图的广度优先遍历3.2 图的深度优先遍历 4. 最小生成树4.1 Kruskal算法4.2 Prim算法 5. 最短路径5.1 单源最短路径--Dijkstra算法5.2 单源最短路径--Bellman-Ford算…...

编程日记 2024/8/19 17:16:11

调研-音视频

音视频 基础概念主要内容音频基础概念音频量化过程音频压缩技术视频基础概念视频bug视频编码H264视频像素格式YUVRGB参考文献基础概念 ● 实时音视频应用环节 ○ 采集、编码、前后处理、传输、解码、缓冲、渲染等很多环节。 主要内容 音频 基础概念 三要素：音调（音频）、…...

编程日记 2024/8/19 17:15:02

【数据结构】链式结构实现：二叉树

二叉树 一.快速创建一颗二叉树二.二叉树的遍历1.前序、中序、后序遍历&#xff08;深度优先遍历DFS&#xff09;2.层序遍历&#xff08;广度优先遍历BFS&#xff09; 三.二叉树节点的个数四.二叉树叶子节点的个数五.二叉树的高度六.二叉树第k层节点个数七.二叉树查找值为x的节点…...

编程日记 2024/8/19 17:11:54

20221元组

在Python语言中, (7)是一种可变的、有序的序列结构,其中元素可以重复。 A.元组(tuple) B. 字符串(str) C. 列表(list) D.集合(set) ChatGPT 说&#xff1a; ChatGPT 在Python中&#xff0c;选项 C 列表(list) 符合题目描述。 解释&#xff1a; 列表 (list) 是一种可变的、有…...

编程日记 2024/8/19 17:10:53

艾瑞白皮书解读（三）丨剖析制造业、工程设计、创投数据治理痛点与典型方案

2024年7月 艾瑞咨询公司对国内数据治理行业进行了研究&#xff0c;访问了国内多位大中型企业数据治理相关负责人&#xff0c;深度剖析中国企业在数字化转型过程中面临到的核心数据问题后&#xff0c;重磅发布《2024中国企业数据治理白皮书》&#xff08;以下简称“白皮书”&…...

编程日记 2024/8/19 17:09:52

如何在 Odoo 16 Studio 模块中自定义视图和报告

为了有效地运营公司&#xff0c;需要定制的软件系统。Odoo 平台提供针对单个应用程序量身定制的管理解决方案和用户友好的界面&#xff0c;以便开发应用程序&#xff0c;而无需更复杂的后端功能。该平台支持使用简单的拖放功能和内置工具创建和修改更多定制的 Odoo 应用程序。企…...

编程日记 2024/8/19 17:06:48

Redis的十大数据类型的常用命令(上)

目录 1.key的操作命令2.String的常用命令案例一&#xff1a;dy点赞案例二&#xff1a;文章的喜欢数 3. List的常用命令案例&#xff1a;公众号订阅的消息 4. Hash的常用命令案例&#xff1a;早期购物车设计 5. Set的常用命令案例一&#xff1a;抽奖小程序案例二&#xff1a;朋友…...

编程日记 2024/8/19 17:03:44

智慧服务管理平台小程序开发方案

智慧服务管理平台小程序系统为用户提供一站式、个性化的服务管理解决方案&#xff0c;帮助用户优化服务流程、提升服务效率、增强客户满意度。适用于智慧校园、食堂、养老、智慧停车、智慧园区、智慧医院、智慧农业、康养、智慧社区、智慧农场等行业场景。一、目标用户 企业客户…...

编程日记 2024/8/19 17:00:40

【轻松拿捏】Java中ArrayList 和 LinkedList 的区别是什么？

ArrayList 和 LinkedList 的区别是什么&#xff1f; 1. ArrayList 2. LinkedList 3.总结 &#x1f388;边走、边悟&#x1f388;迟早会好 ArrayList 和 LinkedList 都是 Java 中常用的 List 接口的实现类&#xff0c;但它们在内部结构和操作性能上有所不同。 1. ArrayLis…...

编程日记 2024/8/19 16:54:34

【排序篇】快速排序的非递归实现与归并排序的实现

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 文章目录 1 快速排序非递归2. 归并排序3.排序算法复杂度及稳定性分析 1 快速排序非递归 利…...

编程日记 2024/8/19 16:52:32

Java垃圾收集器工作原理

在Java编程中&#xff0c;对象的内存分配主要发生在堆&#xff08;Heap&#xff09;上。堆是Java虚拟机&#xff08;JVM&#xff09;中的一块运行时数据区&#xff0c;用于存放由new关键字创建的对象和数组。与栈&#xff08;Stack&#xff09;内存分配相比&#xff0c;堆内存分…...

编程日记 2024/8/19 16:51:27

STM32CubeMX stm32不限长度使用DMA收发串口数据

STM32CubeMX 配置 代码 stm32h7xx_it.c /*** brief This function handles UART7 global interrupt.*/ void UART7_IRQHandler(void) {/* USER CODE BEGIN UART7_IRQn 0 */if (UART7 huart7.Instance) // 判断是否是空闲中断{if (__HAL_UART_GET_FLAG(&huart7, UART_FLA…...

编程日记 2024/8/19 16:48:22

Jmeter系列之作用域、执行顺序

这一节主要解释元件作用域和执行顺序&#xff0c;以及整理之前说过的参数化的方式。 作用域 之前也留下了一个问题。怎么给不同的请求设置不同的Header&#xff1f;后续也透露了可以使用Sample Controller&#xff0c;结合元件的作用域来实现 在Jmeter中&#xff0c;元件的作…...

编程日记 2024/8/19 16:44:15

舜宇光学科技社招校招入职测评：商业推理测验真题汇总、答题要求、高分技巧

舜宇光学科技&#xff08;集团&#xff09;有限公司&#xff0c;成立于1984年&#xff0c;是全球领先的综合光学零件及产品制造商。2007年在香港联交所主板上市&#xff0c;股票代码2382.HK。公司专注于光学产品的设计、研发、生产及销售&#xff0c;产品广泛应用于手机、汽车、…...

编程日记 2024/8/19 16:41:11

C语言——构造（结构体）

指针——内存操作 我们对于内存的操作借助于 <string.h>这个库提供的内存操作函数。 内存填充 头文件: #include<string.h> 函数原型: void*memset(void *s,int c,size_t n); 函数功能&#xff1a; 填充s开始的堆内存空间前n个字节&#xff0c;使得每个字节值为c…...

编程日记 2024/8/19 16:38:08

京东2025届秋招 算法开发工程师 第2批笔试

目录 1. 第一题2. 第二题3. 第三题 ⏰ 时间&#xff1a;2024/08/17 &#x1f504; 输入输出&#xff1a;ACM格式 ⏳ 时长&#xff1a;2h 本试卷还有选择题部分&#xff0c;但这部分比较简单就不再展示。 1. 第一题 村子里有一些桩子&#xff0c;从左到右高度依次为 1 , 1 2…...

编程日记 2024/8/19 16:37:06

模具监视器的技术参数有哪些

模具监视器的技术参数涵盖了多个方面&#xff0c;这些参数对于确保模具监视器的性能、稳定性和检测精度至关重要。以下是一些主要的技术参数&#xff1a; 一、显示器参数 屏幕尺寸&#xff1a;常见的模具监视器显示器尺寸为12.5英寸至13.5英寸&#xff0c;具体尺寸可能因不同…...

编程日记 2024/8/19 16:34:03

使用QGIS配置管线流向地图

一、需求概述 在管网项目中，需要进行地图配置使用QGIS显示管网的流向。 二、目标 配置一副管网地图，可以在地图上显示出每个管段的流向。 三、数据结构 管网数据： id[管线编码]source[起始节点ID]target[终点节点ID]dir[方向]1100101FT2101102FT……………………节点数据…...

编程日记 2024/8/19 16:32:00

白骑士的C#教学附加篇 5.1 C#开发工具

系列目录 上一篇&#xff1a;白骑士的C#教学实战项目篇 4.4 游戏开发 在这一部分&#xff0c;我们将介绍一些额外的内容和工具&#xff0c;以帮助您提高 C# 开发的效率和质量。掌握合适的开发工具和调试技巧&#xff0c;可以让您在编写和维护代码时更加高效和从容。 开发工具对…...

编程日记 2024/8/19 16:28:56

C++中的多线程编程和锁机制

二、多线程、锁 2.1 C语言线程库pthread&#xff08;POSIX threads&#xff09; 2.2.1 线程创建 pthread_create #include <pthread.h>pthread_t thread; ThreadData args {1, "Hello from parameterized thread"}; int result pthread_create(&threa…...

编程日记 2024/8/19 16:24:50

【投融界-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…...

编程日记 2024/8/19 16:23:48

自动打电话软件给企业带来了什么？

使用机器人外呼系统肯定都是想要给自己企业带来好处和解决问题的&#xff0c;想让自己的企业有所改变&#xff0c;有更好的发展&#xff0c;所以才会选择使用机器人外呼系统。而它也确实没让大家失望&#xff0c;使用了机器人外呼系统之后确实有许多企业发生了很大改变和进步&a…...

编程日记 2024/8/19 16:22:45