39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
|
const app = Vue.createApp({
|
||
|
|
data: () => ({
|
||
|
|
inputValue: "",
|
||
|
|
items: [
|
||
|
|
{name: "aaa1", done: false},
|
||
|
|
{name: "bbb2", done: true},
|
||
|
|
{name: "ccc3", done: false}
|
||
|
|
],
|
||
|
|
toggle: false
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
addToList () {
|
||
|
|
//this.items.push(this.inputValue) // nicht mehr brauchbar, da wir jetzt ein objekt haben
|
||
|
|
this.items.push({name: this.inputValue, done: false})
|
||
|
|
this.inputValue = "" //löscht das inputfeld wieder
|
||
|
|
},
|
||
|
|
deleteAll() {
|
||
|
|
this.items = []
|
||
|
|
},
|
||
|
|
deleteItem(index){
|
||
|
|
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
|
||
|
|
this.items.splice(index, 1) // mit (index, 2) löscht es zwei elemente
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
totalCompletedTasks() {
|
||
|
|
let count = 0;
|
||
|
|
for (let i = 0; i < this.items.length; i++){
|
||
|
|
if (this.items[i].done){
|
||
|
|
count++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return count;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
app.mount("#app");
|
||
|
|
|