<template>
<div>
<p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
<p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
<todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="todo in todos" :key="todo.id" v-bind:todo="todo"></todo>
</div>
</template>
<script>
import Todo from './Todo';
export default {
name:'Myapp',
props: ['todos'],
components:{
Todo,
},
methods: {
deleteTodo(todo) {
this.$swal({
title: 'Are you sure?',
text: 'You can\'t revert your action',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, Keep it!',
showCloseButton: true,
}).then((result) => {
const todoIndex = this.todos.indexOf(todo);
this.todos.splice(todoIndex, 1)
if (result.value){
this.$swal('Deleted!', 'Your Todo has been deleted', 'success')
}
else{
this.$swal('Canceled', 'Your Todo is still in place', 'info')
}
});
},
completeTodo(todo) {
const todoIndex = this.todos.indexOf(todo);
this.todos[todoIndex].done = true;
this.$swal('Success', 'Todo Completed!', 'success');
},
}
};
Я новичок в vue.js, и это мой первый проект в vue. В принципе, все работает нормально, но я хотел бы добиться одной вещи, когда пользователь нажимает на кнопку «Не держать» (кнопка «Отмена») или кнопку «Закрыть», и не нужно удалять задачу, но в настоящее время мне трудно добиться этого.
<template>
<div id="app">
<h1 class="ui dividing centered header">Vue.js Todo App</h1>
<div class='ui three column centered grid'>
<div class='column'>
<myapp v-bind:todos="todos"></myapp>
<add-todo v-on:add-todo="addTodo"></add-todo>
</div>
</div>
</div>
</template>
<script>
import Myapp from './components/Myapp';
import Todo from './components/Todo';
import AddTodo from './components/AddTodo';
export default {
name: 'App',
components:{
Myapp,
Todo,
AddTodo,
},
methods: {
addTodo(newTodo){
this.todos.push(newTodo);
}
},
data:function () {
return {
todos: [{
title: 'Project 1',
project: 'School',
done: true,
}, {
title: 'Project 2',
project: 'Mosque',
done: true,
}, {
title: 'Project 3',
project: 'Bank',
done: false,
},
{
title: 'Project 4',
project: 'Hospital',
done: false,
},
{
title: 'Project 5',
project: 'Church',
done: false,
}],
}
}
};
</script>
корневой компонент vue, который передает реквизиты дочернему компоненту.