使用带有Vue组件的Summernote更改其位置

Question

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

每个组件都包含一个夏日音符的文本区域，工作正常。每个编辑器都会加载其文本，并在编辑时更新数据。

但是当组件位置属性发生变化时，编辑器组件表现得很奇怪。

有时它们会改变，有时它们不会改变位置，有时它们会相互覆盖，在两个编辑器中留下相同的字符串。

如何正确绑定组件，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模型作为prop传递。试图直接从挂载的函数加载summernote会让人感到困惑，并且容易出错初始化。