You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.2 KiB
48 lines
1.2 KiB
const { createApp } = Vue;
|
|
createApp({
|
|
data() {
|
|
return {
|
|
newTask: '',
|
|
tasks:[
|
|
{ name: 'Learn Vue', completed: false },
|
|
{ name: 'Create a Vue project with the CLI', completed: true },
|
|
],
|
|
editingIndex: null,
|
|
editingTask: '',
|
|
}
|
|
},
|
|
computed: {
|
|
completedCount() {
|
|
return this.tasks.filter(task => task.completed === true).length;
|
|
}
|
|
},
|
|
methods: {
|
|
addTask(){
|
|
if (this.newTask.trim() !== '') {
|
|
this.tasks.push({ name: this.newTask, completed: false });
|
|
this.newTask = '';
|
|
}
|
|
},
|
|
editTask(index) {
|
|
this.editingIndex = index;
|
|
this.editingTask = this.tasks[index].name;
|
|
},
|
|
cancelEdit() {
|
|
this.editingIndex = null;
|
|
this.editingTask = '';
|
|
},
|
|
saveEdit(index) {
|
|
if(this.editingTask.trim() !== ''){
|
|
this.tasks[index].name = this.editingTask;
|
|
this.cancelEdit();
|
|
}
|
|
},
|
|
deleteTask(index) {
|
|
this.tasks.splice(index, 1);
|
|
},
|
|
completeTask(index) {
|
|
this.tasks[index].completed = true;
|
|
}
|
|
}
|
|
}).mount('#app');
|