I try to create todo list with next features:
I made 1 and 2 but can't make 3. I can only change a title of the first task in tasks array
This is my code
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">×</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>
How can I edit and save in each item summernote's content? This is working example
I think the preferred approach would be to build a component (or use an existing one), which would have props, etc. However, it turns out that there is an internal property of this
inside the directive that you can use: _scope
. It is documented (well, mentioned at least) in the terminal directive example.
Your bind function becomes:
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;
}
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With