[英]VueEditor document is not defined Nuxt.js
在我的 Nuxt.js 项目中,我安装了vue2-editor
包,以便能够用 HTML 编写文章。 当我来到页面时,写点东西并按下按钮一切正常,但是当我重新加载页面时,我得到document is not defined
错误。
这是代码:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
错误看起来像这样:
同样在文档中,我发现对于 Nuxt.js 项目vue2-editor
应该添加到modules
,我做到了,但它仍然不起作用:
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'vue2-editor/nuxt'
],
您可以尝试动态加载它:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor: () => process.client ? (await import("vue2-editor")).VueEditor : ""
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
请按照以下步骤将该插件添加到您的 Nuxt 中
plugins
文件夹,就像pages
和components
,如果没有创建一个并在其中添加一个js
文件vue2-editor.js
。vue2-editor.js
import Vue from "vue"; import Vue2Editor from "vue2-editor"; Vue.use(Vue2Editor);
nuxt.config.js
中,从模块中删除'vue2-editor/nuxt'
并创建一个名为 plugins 的单独数组,如下所示 /*
** Plugins to load before mounting the App
*/
plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.