TypeError: this.$el.querySelector 不是函数 nuxt filepond答案

【问题标题】：TypeError: this.$el.querySelector is not a function nuxt filepondTypeError: this.$el.querySelector 不是函数 nuxt filepond
【发布时间】：2021-07-09 09:48:45
【问题描述】：

我有这些代码

我的模板代码

<no-ssr>
  <file-pond />
</no-ssr>

文件池组件的脚本代码

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview)

export default defineComponent({
  components: {
    FilePond
  },
  setup() {
...

然后我有这个错误

TypeError: this.$el.querySelector is not a function
    at VueComponent.mounted (vue-filepond.js?1501:123)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at callHook (vue.runtime.esm.js?2b0e:4235)
    at Object.insert (vue.runtime.esm.js?2b0e:3158)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6390)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6609)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3963)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4075)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at Watcher.run (vue.runtime.esm.js?2b0e:4570)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4326)
    at Array.eval (vue.runtime.esm.js?2b0e:1989)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1915)

文件似乎在服务器端运行，没有访问 DOM，但我不知道如何仅在客户端运行，<no-ssr> 和 client-only 不起作用

【问题讨论】：

您的代码没有显示任何相关内容。您能否提供有关您的代码/设置的更多相关信息？顺便说一句，Nuxt 还在使用 Vue2，
应该使用 vue-filepond@6
@Rik 我已将其用作插件，并且我在 mode:client 注册了它，它可以工作

标签： nuxt.js vuejs3 vue-composition-api filepond

【解决方案1】：

转到vue-filepond GitHub repo，下载存储在lib/index.js 中的文件。将它放在你的代码库中的某个地方并编辑mounted 函数，将this.$el.querySelector 更改为document.querySelector。

那么你可以直接导入这个文件，而不是作为node_module导入：

import vueFilePond from './file-pond.js'

注意：对于 Vue 2，请使用 6.x 版插件

【讨论】：