Using Vue with Redactor

Question

I am using a v-model on Redactor. When I do this it returns "Event" not the actual data I'm looking for. Any ideas on how to return the correct data?

HTML

<div id="question-create-form">
  <textarea class="form-control question-create-editor" id="question_description" rows="3"></textarea>
</div>

JS

$('#question-create-form .question-create-editor').redactor({
    imageUpload:'/urlGoesHereBro/',
    plugins: ['video', 'imagemanager', 'counter', 'limiter'],
    buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
  });
  $('#question-create-form .redactor-editor').attr('v-model', 'questionDescription');

Answer 1

Redactor appears to be a jQuery widget, which means it works by manipulating the DOM. Vue expects to control the DOM, which means the two are going to step on each others' toes unless you confine your (Redactor's) DOM manipulations to the lifecycle hooks of a wrapper component.

To make your Redactor component work with v-model, it will need to:

1. accept a value prop
2. emit an input event with the new value