Нужно сделать так, чтобы при клике на определённую кнопку дублировался таск ( задание ) в ToDo
листе на vue
и, так-же, сохранялся в localStorage
Вот код HTML
:
<ul v-for='(task, index) in filtered'>
<li><span v-if="task !== editingTask" @click="editTask(task)">{{ task.name }}</span><input type="text" v-if="task === editingTask" v-auto-focus class="left" @keyup.enter="endEditing(task)" v-model="task.name"></li>
<li><button class="btn btn-primary">Дублировать</button></li>
<li><button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li>
</ul>
Вот Vue
код:
var keyLocal = 'vue-js'
var todoStorage = {
fetch: function () {
var todos = localStorage.getItem(keyLocal)
return typeof(todos !== "undefined") ? JSON.parse(todos) : []
},
save: function (todos) {
localStorage.setItem(keyLocal, JSON.stringify(todos));
}
}
var app = new Vue({
el: '#taskApp',
data: {
search: '',
inputVal: '',
changeVal: '',
editingTask: '',
show: false,
tasks: []
},
watch: {
tasks: {
handler: function(tasks) {
todoStorage.save(tasks);
}
}
},
mounted() {
this.tasks = todoStorage.fetch()
},
methods: {
// Добавление таска
addTask: function(e) {
e.preventDefault();
if(this.inputVal){
this.tasks.push({
name: this.inputVal,
status: false,
})
}
},
// Удаление таска
deleteTask: function(task) {
let index = this.tasks.indexOf(task)
this.tasks.splice(index, 1)
},
// Редактирование таска
editTask: function (task) {
this.editingTask = task;
},
// Окончание редактирования и занесение
endEditing: function () {
this.editingTask = null
localStorage.setItem(keyLocal, JSON.stringify(this.tasks))
}
},
computed: {
filtered () {
return this.tasks.filter(tasks => tasks.name.match(this.search))
}
}
})