vue无法获取dom

小和尚敲木头

于 2024-01-05 18:01:18 发布

阅读量607

点赞数 9

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/w710537643/article/details/135403732

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章讨论了在Vue项目中使用watch监听$store.state.modelsStorageUrl时遇到的TypeError，主要关注了箭头函数对`this`指向的影响，以及为何在created和methods中使用`this.$nextTick`。解决方法提到是因为`computed`错误影响了DOM加载，导致`this.$refs`无法正常工作。

摘要由CSDN通过智能技术生成

处理过程

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 指向问题

参考文档

vue 生命周期函数不建议使用箭头函数，使用function
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)
      }
      )
    }
}