Используйте Summernote с Vue-компонентами, меняющими свои позиции - PullRequest
Новая
       10

Используйте Summernote с Vue-компонентами, меняющими свои позиции

0 голосов
/ 23 декабря 2018

У меня есть список Vue-компонентов, созданных с помощью v-for.

Каждый компонент содержит текстовую область для summernote, которая прекрасно работает.Каждый редактор загружает свой текст, и данные редактируются при редактировании.

Но когда изменяются свойства позиции компонентов, компоненты редактора ведут себя странно.

Иногда они изменяются, иногда они не изменяютсяпозиции и иногда они перезаписывают друг друга, оставляя одну и ту же строку в обоих редакторах.

Как правильно связать компонент, его элемент textarea и экземпляр редактора? 

<div v-for="(item, i) in orderedItems" class="">
  <component :is="item-text" :key="item.pos" :item="item" :key="item.id"></component>
</div>

<template id="item-text">
  <div class="item-text">
      <textarea class="text-editor" :id="'text-editor-'+item.id" :data-id="item.id" name=""></textarea>
  </div>
</template>
<script>
Vue.component('item-text', {
  props:['item'],
  data: function () {
    return {
    }
  },
  mounted:function(){
    $('.text-editor[data-id='+this.item.id+']').summernote({    });
    $('.text-editor[data-id='+this.item.id+']').summernote('code', this.item.contents.html);
    var parent = this;
    $('.text-editor[data-id='+this.item.id+']').on('summernote.change', function(we, contents, $editable) {
      var id = we.target.id;
      parent.item.contents.html=contents;
    });
  },
  template: '#item-text'
});
</script>

1 Ответ

0 голосов
/ 11 апреля 2019

Лучшее, что нужно сделать, это поместить Summernote в свой компонент.Затем v-for создает несколько компонентов и передает v-модель в качестве реквизита.Попытка загрузить SummerNote по отдельности прямо из смонтированной функции будет сбивать с толку и приводить к ошибкам при инициализации.

...