vuejsを使用したtrumbowygエディタ

Question

私はvuejs spaにtrumbowygエディタコントロールを使用しています。 the documentationから私は次のコードを使ってエディタの内容を設定できることを知っています。

$('#editor').trumbowyg('html','<p>Your content here</p>'); 
$('#editor').trigger('tbwchange'); 

ただし、私のVueJs Appでは動作しません。私は説明キーが定義されているオブジェクトを持っています。私はconsole.logの記述ができますが、上記のようにエディタコントロールに割り当てようとすると失敗します。 consoleにエラーは表示されませんが、テキストはエディタに表示されません。

これは私が現時点で行っていることです。

<template> 
    <div class="modal fade" data-backdrop="static" data-keyboard="false"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"> 
         <span v-if="anouncement">Edit Anouncement</span> 
         <span v-else>New Anouncement</span> 
        </h4> 
       </div> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <input type="text" placeholder="enter anouncement summary here" class="form-control" v-model="anouncementObj.summary"> 
        </div> 
        <div class="form-group"> 
         <input type="text" placeholder="enter location here" class="form-control" v-model="anouncementObj.location"> 
        </div> 
        <textarea class="note-view__body" id="anonDescription" v-model="description" placeholder="enter event description"></textarea> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button> 
        <button type="button" v-on:click="performSave()" class="btn btn-link">Save</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     props : { 
      anouncement : Object 
     }, 
     data() { 
      return { 
       anouncementObj :{} 
      } 
     }, 
     mounted() { 
      this.makeTextBoxReady(); 
      this.anouncementObj = Object.assign({},this.anouncementObj, this.anouncement || {}); 
       $('#anonDescription').trumbowyg('html',this.anouncement.description); 
       $('#anonDescription').trigger('tbwchange'); 
       console.log(this.anouncement.description); 
     }, 
     methods : { 
      makeTextBoxReady: function() { 
       $(document).ready(function() { 
        if (!$('html').is('.ie9')) { 
         if ($('.note-view__body')[0]) { 
          $('.note-view__body').trumbowyg({ 
           autogrow: true, 
           btns: [ 
            'btnGrp-semantic', ['formatting'], 
            'btnGrp-justify', 
            'btnGrp-lists', ['removeformat'] 
           ] 
          }); 
         } 
        } 
       }); 
      }, 
      performSave : function() { 
       let description = $('#anonDescription').trumbowyg('html'); 

       let formData = new FormData(); 
       for (name in this.anouncementObj) { 
        formData.append(name, this.anouncementObj[name]); 
       } 

       if(!this.anouncementObj.id) { 
        this.anouncementObj.id = 0; 
       } 

       formData.append('description',description); 

       this.$http.post('/admin/anouncement/createOrUpdate', formData).then(response => { 
        // console.log(response); 
        if(response.data.status==200) { 
         alert(response.data.message); 
         this.$emit('getAnouncements'); 
        } 
       }) 
      }, 
      clear: function() { 
       this.anouncementObj= {}; 
      } 

     } 
    } 
</script> 

ここで間違っていることを教えていただけますか？私もnexttickアプローチを試みましたが、それでもうまくいきません。

Answer 1

私はそれを働かせました。私は正しいブートストラップモーダルIDを使用していませんでした。詳細はrelated questionをご覧ください。

これは正しいコードです。

if(this.anouncementObj && this.anouncementObj.description && this.anouncementObj.id) { 
    $('#'+this.anouncementObj.id+' #anonDescription').trumbowyg('html',this.anouncementObj.description); 
    $('#'+this.anouncementObj.id+' #anonDescription').trigger('tbwchange'); 
}