メディアエディタが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に移入される前に、バインド機能が実行されることを表示されます。

誰でもこの2つを統合した経験はありましたか？

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>