Cannot read property ‘querySelectorAll‘ of undefined问题解决

发布时间:2024年01月11日

这个错误通常是由于在页面加载完成之前尝试访问 DOM 元素而引起的。可以考虑在页面加载完成后再进行相关操作,或者使用 setTimeout 函数等方法等待页面加载完成。

以下是一种可能的解决方案:

 


html
<template>
  <view>
    <button @tap="handleClick">点击按钮</button>
    <view id="demo" v-if="showDemo">
      <!-- 一些需要访问的 DOM 元素 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDemo: false
    }
  },
  mounted() {
    // 等待 1 秒钟后再显示 demo 区域
    setTimeout(() => {
      this.showDemo = true
    }, 1000)
  },
  methods: {
    handleClick() {
      // 在点击按钮时访问 demo 区域中的 DOM 元素
      const elements = document.querySelectorAll('#demo > div')
      console.log(elements)
    }
  }
}
</script>






上述代码中,使用 setTimeout 函数等待 1 秒钟后再显示 DEMO 区域。在点击按钮时,访问 DEMO 区域中的 DOM 元素,并将结果输出到控制台中。

请注意,在实际应用中,应该根据具体情况来判断何时访问 DOM 元素,以避免类似问题的出现。同时建议使用框架提供的生命周期钩子函数来处理页面加载完成时的操作。

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