将Summernote与Vue-components一起使用更改其位置

Question

我有一个用v-for创建的Vue-components列表。

每个组件都包含一个用于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>

Answer 1

最好的做法是将Summernote放入它自己的组件中。然后v-for创建多个组件，并将v-model作为道具传入。尝试直接从已挂载的函数中单独加载summernote将会令人困惑，并且容易在初始化时出错。