todoList

<script setup>
import {ref} from "vue";
const todo = ref("");
const todoList = ref([]);
const addTodo = () => {
  todoList.value.push({todoName: todo.value, status: false});
  todo.value = "";
}
const deleteTodo = () => {
  todoList.value = todoList.value.filter((todo) => {
    return todo.status !== true;
  })
}
const finishTodo = (index) => {
  todoList.value[index].status = !todoList.value[index].status;
}
</script>
​
<template>
  <div>
    <input type="text" v-model="todo">
    <button @click="addTodo">add todo</button>
  </div>
  <ul>
    <li 
      v-for="todo, index in todoList" 
      :key="index"
      :style="{
        textDecoration: todo.status? 'line-through' : 'none'
      }"
    >
      {{ todo.todoName }}
      <button @click=finishTodo(index)>done</button>
    </li>
  </ul>
  <button @click="deleteTodo">delete finished todos</button>
</template>
​
<style scoped>
​
</style>