使用summernote与vuejs

Question

我尝试创建待办事项列表旁边的特点：

1. 排序项
2. 所见即所得的编辑器中的每个项目
3. 在待办事项模型中的每个变化项目的编辑店

我做了1和2，但不能做3.我只能改变任务列表中第一个任务的标题

Th是是我的代码

app.js

Vue.directive('summernote', { 
    bind: function() { 
    this.editor = $(this.el).summernote({ 
     airMode: true, 
     disableDragAndDrop: true, 
     popover: { 
     air: [ 
      ['style', ['bold', 'italic', 'underline', 'clear']] 
     ] 
     }, 
     callbacks: { 
     onChange: function(contents, $editable) { 
      vm.tasks[0].title = contents; 
     } 
     } 
    }); 
    } 
}); 

var vm = new Vue({ 
    el: '#todos', 

    ready: function (value) { 
    Sortable.create(this.$el.firstChild, { 
     draggable: 'li', 
     animation: 500, 
     onUpdate: function(e) { 
     var oldPosition = e.item.getAttribute('data-id'); 
     var newPosition = this.toArray().indexOf(oldPosition); 
     vm.tasks.splice(newPosition, 0, vm.tasks.splice(oldPosition, 1)[0]); 
     } 
    }); 
    }, 

    data: { 
    tasks: [ 
     { title: 'First task', done: true }, 
     { title: 'Second task', done: true }, 
     { title: 'Third task', done: false } 
    ], 
    newTask: '', 
    editTask: null 
    }, 

    methods: { 
    addTask (e) { 
     e.preventDefault(); 
     this.tasks.push({ title: this.newTask, done: false }); 
     this.newTask = ''; 
    }, 

    removeTask (index) { 
     this.tasks.splice(index, 1); 
    } 
    } 
}) 

的index.html

<div class="container"> 
    <div id="todos"><ul class="list-group"> 
     <li 
      v-for="task in tasks" 
      class="list-group-item" 
      data-id="{{$index}}" 
      > 
      <span 
       @click="task.done = !task.done" 
       class="glyphicon glyphicon-ok" 
       ></span> 
       <div v-summernote>{{ task.title }}</div> 
      <span @click="removeTask($index)" class="close">&times;</span> 
     </li> 
    </ul> 

    <form @submit="addTask"> 
     <input v-model="newTask" class="form-control" type="text" placeholder="Add some task"> 
    </form> 
    <div v-summernote></div> 
    <pre>{{tasks | json}}</pre> 
    <pre>{{editor}}</pre> 
    </div> 
</div> 

我如何可以编辑和保存在每个项目summernote的内容？这是工作example

Answer 1

我认为最佳的办法是建立一个组件（或使用an existing one），这将有道具等。然而，事实证明，有一种this指令内的内部属性，您可以使用：_scope。它在terminal directive example中被记录（至少在文中提到过）。

你绑定功能就变成了：

bind: function() { 
    const scope = this._scope; 
    this.editor = $(this.el).summernote({ 
    airMode: true, 
    disableDragAndDrop: true, 
    popover: { 
     air: [ 
     ['style', ['bold', 'italic', 'underline', 'clear']] 
     ] 
    }, 
    callbacks: { 
     onChange: function(contents, $editable) { 
     scope.task.title = contents; 
     } 
    } 
    }); 
}