javascript - [Vue 警告]:beforeCreate 钩子中的错误:“ReferenceError:文档未定义”
问题描述
这可能是一个很长的镜头,但我无法弄清楚出了什么问题。希望有人能给我一些指导。
我在我的 Nuxt 项目中使用 vue 快速编辑插件: https ://github.com/A1rPun/vue-quick-edit。
有时我会弹出错误:
[Vue 警告]:beforeCreate 钩子中的错误:“ReferenceError:文档未定义”
这似乎只在我第一次加载页面时发生(未经证实!),之后它再也不会发生(使用 ctrl+F5,以隐身方式加载,在另一个浏览器中尝试,......),它永远不会再次显示并且图书馆工作完美。
但是,这让我对使用该库犹豫不决,因为我不确定错误来自哪里以及它是否会影响我的最终用户。
这是我为使用内联可编辑字段而创建的组件:
<template>
<quick-edit
:aria-label="label"
@input="updateValue"
/>
</template>
<script>
import QuickEdit from 'vue-quick-edit'
export default {
components: { QuickEdit },
props: {
label: {
type: String,
required: true,
},
},
methods: {
updateValue (event) {
// do something
},
},
}
</script>
<style lang="scss" scoped>
</style>
解决方案
当 Nuxt 在服务器端渲染页面时组件尝试访问 DOM,解决方案是将其包装在client-only
<template>
<client-only>
<quick-edit
:aria-label="label"
@input="updateValue"
/>
</client-only>
</template>
推荐阅读
- java - 调用一个带有 @valid 注释并且有一个 Errors 参数的方法
- javascript - 从不同的目录访问 JS 文件
- nginx - Nginx 用哈希或 md5 重写 url
- function - 需要帮助了解此 Haskell 代码的工作原理
- python - kivy 中的一个类的 add_widget 和 remove_widget
- android - 如何将 android 的新依赖项添加到 chromium?
- kubernetes - argocd cli json 输出
- java - 通过键将换行符分隔的 JSON 中的所有值字符串化
- nginx - 韵律的 Nginx 反向代理返回 404
- laravel - Laravel DB::transaction - 保存到事务之外的表中?