这可能是一个长镜头,但我无法弄清楚出了什么问题。希望有人能给我一些指示。
我正在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>
答案 0 :(得分:2)
这是因为 Nuxt 首次在服务器端呈现页面,因此document
实际上没有在服务器中定义。
您可以在nuxt.config.js
中定义插件,并告诉nuxt仅在客户端中使用它:
在nuxt.config.js
中:
...
plugins: [
{ src: "~/plugins/quickEdit.js", ssr: false }
]
...
和~/plugins/quickEdit.js
中的
import Vue from "vue";
import QuickEdit from 'vue-quick-edit'
Vue.use(QuickEdit);
,然后在组件中使用它。
答案 1 :(得分:2)
当Nuxt在服务器端渲染页面时,该组件尝试访问DOM,解决方案是将其包装在client-only
<template>
<client-only>
<quick-edit
:aria-label="label"
@input="updateValue"
/>
</client-only>
</template>