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