问题描述
我刚开始使用 Vue2Editor，目的是替换我用来将文本和图像数据发送到 Firebase 数据库的许多表单。 我的问题是我无法添加编辑器中输入的数据。
使用表单时，我只需将事件处理程序附加到表单本身并创建一个允许传输的函数。
示例：
<form @submit.prevent="addText">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" v-model="fname">
</form>
<button type="submit" variant="success">Save</button>
但是当使用 Vue2Editor 时，我没有得到任何表单标签。 我只是得到一个“vue-editor”标签。我尝试在此标记中添加事件处理程序，但没有任何反应。 我没有收到任何错误，但数据在提交时并未传输到数据库。
这是代码：
<template>
<div class="container">
<div class="text_editor">
<h2>Add new content</h2>
<vue-editor @submit.prevent="addText" v-model="textblock" />
<button type="submit" class="textblock_btn" variant="success">Save</button>
</div>
</div>
</template>
<script>
import db from '@/firebase/init'
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
export default {
name: 'textblock',data () {
return {
textblock: null
}
},methods: {
addText(){
db.collection('textblock').add({
textblock: this.textblock
}).then(() => {
this.$router.push({ name: 'Index' })
}).catch(err => {
console.log(err)
})
}
}
}
</script>
解决方法
您仍然可以将组件包装在表单中，因为 WYSIWYG 编辑器的数据绑定到 v-model 属性。
<form @submit.prevent="addText">
<div class="text_editor">
<h2>Add new content</h2>
<vue-editor v-model="textblock" />
<button type="submit" class="textblock_btn" variant="success">Save</button>
</div>
</form>
在 addText 方法中，您现在拥有 this.textblock 以及有关表单提交的适当数据。