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

当出现 "Cannot read property 'querySelectorAll' of undefined" 错误时，通常意味着您尝试在一个未定义或者为空的值上执行 querySelectorAll 方法。这可能是由于尚未正确获取到 DOM 元素或者元素不存在导致的错误。以下是一些解决方法和代码示例：

解决方法：

1. 检查元素是否存在： 在调用 querySelectorAll 之前，确保相关的 DOM 元素已经被正确渲染，并且可以被查询到。

2. 使用条件语句进行安全检查： 在执行 querySelectorAll 前，可以使用条件语句对可能为空的变量进行检查，以避免对空值进行操作。

3. 确保在合适的时机调用查询方法： 确保在 Vue 组件生命周期函数中（如 mounted 钩子）或者其他适当的时机调用 querySelectorAll，以便确保 DOM 已经被正确渲染。

代码示例：

// 错误示例：
mounted() {
  const elements = document.querySelectorAll('.example-class');
  // 对未定义或未渲染的元素执行查询操作
}

// 正确示例：
mounted() {
  const element = document.querySelector('.example-class');
  if (element) {
    // 执行查询前进行安全检查
    const childElements = element.querySelectorAll('.child-element');
    // 进行进一步操作
  }
}

在以上示例中，我们首先检查了父元素是否存在，然后才在其下进行进一步的查询操作。这样能够避免因为父元素不存在或者未渲染而导致的错误。

通过上述方法和示例，您可以避免 "Cannot read property 'querySelectorAll' of undefined" 错误并提高代码的鲁棒性。