Редактор сред не предварительно заполняет значение в директиве VueJS

Question

Я пытаюсь интегрировать редактор среды с директивой VueJs.

Это работает хорошо, но начальный value опора для поля изначально не заполняет редактор среды. Как только я обновляю текст в редакторе среды, ссылка устанавливается, и текст HTML заполняется в текстовой области.

Директива:

Vue.directive('wysiwyg', {
  bind () {
    let editor = new MediumEditor(this.el)
  }
})

Элемент:

<textarea v-wysiwyg name="{{ name }}" class="wysiwyg">{{ value }}</textarea>

Похоже, что функция привязки запускается до того, как значение заполняется в textarea,

У кого-нибудь был опыт интеграции этих двух?

Answer 1

Да, привязка к контейнеру произойдет до привязки его содержимого. Вы можете подождать, используя nextTick,

Vue.directive('wysiwyg', {
  bind() {
    Vue.nextTick(() => new MediumEditor(this.el));
  }
});

new Vue({
  el: 'body',
  data: {
    value: 'Initial text'
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.0/js/medium-editor.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.0/css/medium-editor.min.css" rel="stylesheet" />
<textarea v-wysiwyg name="{{ name }}" class="wysiwyg">{{ value }}</textarea>