Vue.js 报错：'Uncaught (in promise) TypeError: _this.$refs.myFrame.querySelectorAll is not a function' 解决方法

在 Vue.js 开发中，经常会遇到 'Uncaught (in promise) TypeError: _this.$refs.myFrame.querySelectorAll is not a function' 的错误。这个错误表示在使用 $refs 对象的 myFrame 属性时，尝试调用其 querySelectorAll 方法，但该方法不存在。

可能的原因是：

• myFrame 不是一个 DOM 元素。
• myFrame 是一个 DOM 元素，但没有实现 querySelectorAll 方法。

解决方法：

1. 检查 myFrame 属性： 确保 myFrame 属性指向的是一个 DOM 元素。可以使用 console.log(_this.$refs.myFrame) 查看其类型和属性。
2. 使用 contentWindow： 如果 myFrame 是一个 <iframe> 元素，可以使用 myFrame.contentWindow.document.querySelectorAll 来代替 myFrame.querySelectorAll。

示例代码：

<template>
  <iframe ref='myFrame' src='https://www.example.com'></iframe>
</template>

<script>
export default {
  mounted() {
    // 获取 iframe 内部页面的所有 <p> 元素
    const paragraphs = this.$refs.myFrame.contentWindow.document.querySelectorAll('p');
    console.log(paragraphs);
  }
}
</script>

通过以上步骤，可以有效地解决 'Uncaught (in promise) TypeError: _this.$refs.myFrame.querySelectorAll is not a function' 的错误。