[英]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.