Verwenden summernote mit vuejs

Question

Ich versuche, ToDo-Liste mit folgenden Funktionen zu erstellen:

1. sortierbar Artikel
2. WYSIWYG-Editor
in jedem Elemente
3. jeweils Änderungen in Editor speichert Stück in todos Modell

Ich habe 1 und 2 gemacht aber kann nicht 3 machen. Ich kann nur einen Titel der ersten Aufgabe im Aufgabenfeld ändern

Th mein Code ist

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> 

Wie kann ich in jedem Element summernote Inhalt bearbeiten und speichern? Dies funktioniert example

Answer 1

Ich denke, der bevorzugte Ansatz, eine Komponente zu bauen wäre (oder an existing one verwenden), die Requisiten haben würde, usw. Aber es stellt sich heraus, dass es eine interne Eigenschaft this in der Richtlinie, dass Sie kann verwenden: _scope. Es ist dokumentiert (gut, zumindest erwähnt) in der terminal directive example.

Ihre bind Funktion wird:

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