Vue 2 With CKEditor 4: Multiple editors are not binding to the right v-model

Viewed 10

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>
0 Answers
Related