vue无法获取dom

news2024/11/24 9:51:46

处理过程

watch监听值变化

index.js:33  [Vue warn]: Error in callback for watcher "$store.state.modelsStorageUrl": "TypeError: Cannot set properties of undefined (setting 'modelScene')"
watch: {
	"$store.state.modelsStorageUrl":{
      handler:(newVal,oldVal)=>{
        console.log("watched")
        console.log("oldVal",oldVal);
        console.log("newVal",newVal);
          if(oldVal!==''){
            console.log("加载速度快",oldVal)
            this.modelScene = new loadModel(oldVal);
            this.loadModelsUrl()
            console.log(this.modelScene)
          }
          if(oldVal!==newVal){
            console.log("加载速度慢",newVal,oldVal)
            console.log("oldVal",oldVal);
            console.log("newVal",newVal);
            this.modelScene = new loadModel(newVal);
            this.loadModelsUrl()
            console.log(this.modelScene)
          }
          if(newVal){
            console.log("加载速度慢2",newVal)
            this.modelScene = new loadModel(newVal);
            this.loadModelsUrl()
            console.log("this.modelScene",this.modelScene)
          }
      }
    }
}

this 指向问题

参考文档

  1. vue 生命周期函数不建议使用箭头函数,使用function
  2. this.$nextTick 使用箭头函数。
created() {
	this.loadModelsUrl()
},
methods: {
	loadModelsUrl(){
      this.$nextTick(()=>{
            setTimeout(() => {

              this.modelScene.showPageViewScene(
                  this.$refs.three_canvas,
                  this.width,
                  this.height
              )
              this.percentage = 100
            }, 2)
      }
      )
    }
}

解决

最后原因 computed 报错 导致页面没有加载DOM,所以this.$refs.three_canvas
无法获取到在这里插入图片描述

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

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

相关文章

24上半年教师资格证笔试报名全流程✅

🕐考试时间安排 (一)报名时间: 2024年1月12日9:30至15日16:00 (二)缴费时间: 2024年1月17日24:00 (三)考试时间: 2024年3月9日星期六 (四&#xf…

上网行为管理到底是什么!

之前经常听过上网行为管理系统,那这个系统到底是什么,还真不是很清楚!今天仔细查了很多资料,分享给大家: 上网行为管理是指一种帮助互联网用户控制和管理对互联网的使用,包括对网页访问过滤、上网隐私保护…

vue3 useAttrs的使用场景,提取共有props

1 场景 多个类似组件都需要传参data,用于请求接口或者处理数据,想让组件干净整洁,把参数data提出来 2 方法 选项式 可以使用mixin混入或者extends继承(略) 组合式 可以使用hook 无脑式踩坑(如下代码…

SwiftUI之深入解析Alignment Guides的超实用实战教程

一、Alignment Guide 简介 Alignment guides 是一个强大的布局工具,但通常未被充分利用。在很多情况下,它们可以帮助我们避免更复杂的选项,比如锚点偏好。如下所示,对对齐的更改也可以自动(并且容易地)动画…

Python书籍推荐,建议收藏

学习Python的书籍可太多了,从入门到放弃,应有尽有啊 入门书籍 根据豆瓣评分的高低,这里介绍了一些经典入门书籍,大家根据自身情况选择尝试 《Python编程:从入门到实践(第二版)》 非常经典且非…

【python】TCP测速程序

一、服务端 下面是一个简单的 Python 服务端程序的示例,使用标准库中的 socket 模块来建立一个 TCP 服务器。该服务器接收客户端的连接请求,客户端发送一定大小的数据流以测试 TCP 带宽。 实际场景中带宽测试可能需要更复杂的逻辑来确保测试的准确性。 …

Android AAudio

文章目录 基本概念启用流程基本流程HAL层对接数据流计时模型调试 基本概念 AAudio 是 Android 8.0 版本中引入的一种音频 API。 AAudio 提供了一个低延迟数据路径。在 EXCLUSIVE 模式下,使用该功能可将客户端应用代码直接写入与 ALSA 驱动程序共享的内存映射缓冲区…

基于springboot在线考试系统源码和论文

网络的广泛应用给生活带来了十分的便利。所以把在线考试管理与现在网络相结合,利用java技术建设在线考试系统,实现在线考试的信息化。则对于进一步提高在线考试管理发展,丰富在线考试管理经验能起到不少的促进作用。 在线考试系统能够通过互…

前端实现截图并下载

原理: 使用一个名为html2canvas的JavaScript库。这个库允许你将当前的HTML内容渲染到一个canvas元素上,然后将其转换为图像并进行下载。 你需要在项目中引入html2canvas库。你可以从官方网站(https://html2canvas.hertzen.com/)下载&#xf…

编译原理期末大题步骤——例题

一、预测分析方法步骤 提取左公因子,消除左递归判断文法是否为LL(1)文法若是,构造预测分析表;否则,不能进行分析。根据预测分析表对输入串进行分析 例子: 文法G[E]: …

selenium python 实现基本自动化测试的示例代码

安装selenium 打开命令控制符输入:pip install -U selenium 火狐浏览器安装firebug:www.firebug.com,调试所有网站语言,调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件,实现简单的浏览器操 作的录制与回…

如何克隆驱动器,不同的操作系统有不同的推荐软件

你需要将Windows或macOS安装迁移到新驱动器吗?你可以使用服务备份文件,也可以创建数据的完整一对一副本。通过克隆你的驱动器,你可以创建一个精确的副本。 一些业务级别的备份服务,如IDrive和Acronis,具有内置的磁盘克隆功能,是对正常文件备份的补充。但对于一次性克隆(…

BitMap解析(一)

文章目录 前言数据结构添加与删除操作 JDK中BitSet源码解析重要成员属性初始化添加数据清除数据获取数据size和length方法集合操作:与、或、异或 前言 为什么称为bitmap? bitmap不仅仅存储介质以及数据结构不同于hashmap,存储的key和value也…

在python里面探索web框架

一、常识性知识 python Web框架三巨头:Flask(简单易学)、Django(复杂庞大)、FastAPI 1. Django:Django是一个高级的Web框架,它提供了强大的功能和工具,用于快速开发复杂的Web应用程序。 2. Flask&#xff…

海外社媒运营为什么需要选择优质IP代理?

跨境电商卖家尤其需要关注海外社媒运营,想要更好地运营Instagram、Facebook、TikTok 或 Twitter等,挖掘社媒潜力需要采取战略方法,而社交媒体IP代理在这一活动中发挥着至关重要的作用,下面为你详细介绍。 一、社交媒体代理IP及其运…

新年喝酒有讲究,怎么喝葡萄酒呢?

中国的新年有着独特又深远的意义,无论人在天涯海角,回家团圆是每个人的心愿。新年亲朋好友欢聚一堂,没有酒哪有气氛,所以喝酒是必不可少的活动项目。云仓酒庄的品牌雷盛红酒LEESON分享那么,新年喝啥酒,葡萄…

C# 一看就懂的装箱拆箱案例

文章目录 装箱(Boxing)拆箱(Unboxing)编程语言中的装箱与拆箱优缺点 在C#中,装箱(Boxing)和拆箱(Unboxing)是值类型与引用类型之间相互转换的过程。 装箱(Box…

【Qt打包】Qt打包生成可安装exe文件

第三方打包 gitee 项目地址:https://gitee.com/hudejie/universal-software-installation-package 纯净包备份(v0.1):https://download.csdn.net/download/weixin_45863921/88720027 1 项目介绍 作者项目介绍: 基于NS…

通用机V8R6集群部署_1主1备1见证_图形化_Centos7

KingbaseES 提供数据库部署工具进行数据库集群的部署。KingbaseES 提供基于图形化和命令行操作的集群部署方式,本文档主要用于指导不支持 GUI 的服务器上的 KingbaseES 集群部署工作。 集群简介 KingbaseES软件能够提供一主一备以及一主多备的高可用集群架构&…

Python轴承故障诊断 (十)基于VMD+CNN-Transfromer的故障分类

目录 1 变分模态分解VMD的Python示例 2 轴承故障数据的预处理 2.1 导入数据 2.2 故障VMD分解可视化 3 基于VMDCNN-Transformer的轴承故障诊断分类 3.1 定义VMD-CNN-Transformer分类网络模型 3.2 设置参数,训练模型 3.3 模型评估 代码、数据如下&#xff1a…