I'm m having a problem with CKEditor 4 which I use at my Vue 2. I have two CKEditor in a page which each has their own v-model: question for the first editor and answer for the second editor. Whenever I clicked a button to console both of the value, the value of question will always the same as answer. How can I fix this? Here's my code:
<template>
<div class="hello">
<form @submit.prevent="printData">
<h3>Insert Question</h3>
<ckeditor v-model="question" :config="editorConfig"></ckeditor>
<h3>Insert Answer</h3>
<ckeditor v-model="answer" :config="editorConfig"></ckeditor>
<button type="submit">Console Value</button>
</form>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
editorConfig: {
extraPlugins: 'mathjax',
mathJaxLib: '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
},
answer: null,
question: null
}
},
methods: {
printData() {
console.log("This is question", this.question);
console.log("This is answer", this.answer);
}
},
}
</script>