vue无法获取dom

发布时间:2024年01月05日

处理过程

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
无法获取到在这里插入图片描述

文章来源:https://blog.csdn.net/w710537643/article/details/135403732
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。