Bangun Todo App dengan Vue!

Gabungkan semua konsep yang sudah dipelajari:

const todos = ref([])
const input = ref("")

const addTodo = () => {
  if (input.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: input.value.trim(),
      done: false,
    })
    input.value = ""
  }
}

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) todo.done = !todo.done
}

const deleteTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id)
}

---template---
<div>
  <input v-model="input" id="todo-input" />
  <button @click="addTodo" id="add-btn">Tambah</button>
  <ul id="todo-list">
    <li v-for="todo in todos" :key="todo.id">
      <span
        :style="{ textDecoration: todo.done ? 'line-through' : 'none' }"
        @click="toggleTodo(todo.id)"
      >{{ todo.text }}</span>
      <button @click="deleteTodo(todo.id)">×</button>
    </li>
  </ul>
</div>

Selamat! Kamu sudah menguasai dasar-dasar Vue.