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");