[Vue警告]：beforeCreate挂钩中的错误：“ ReferenceError：未定义文档”

Question

这可能是一个长镜头，但我无法弄清楚出了什么问题。希望有人能给我一些指示。

我正在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>
    

这可能是一个长镜头，但我无法弄清楚出了什么问题。希望有人能给我一些指示。我正在使用vue快速编辑插件：https://github.com/A1rPun/vue-quick-edit ...

Answer 1

这是因为Nuxt

Answer 2

当Nuxt在服务器端渲染页面时，该组件尝试访问DOM，解决方案是将其包装在client-only中>

<template>
  <client-only>
     <quick-edit
       :aria-label="label"
       @input="updateValue"
     />
  </client-only>
</template>