使用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; 
     } 
    } 
    }); 
}