<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Todo App</title>
<style>
body { font-family: Arial, sans-serif; }
.todo-list { list-style-type: none; padding: 0; }
.todo-item { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
.todo-item input[type="text"] { width: calc(100% - 60px); }
.todo-item button { margin-left: 10px; }
</style>
</head>
<body>
<div id="app">
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
<ul class="todo-list">
<li v-for="(todo, index) in todos" :key="index" class="todo-item">
<input type="text" v-model="todo.text" @blur="editTodo(index, todo.text)">
<button @click="removeTodo(index)">Delete</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push({ text: this.newTodo.trim() });
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
},
editTodo(index, newText) {
// This method is called when the input blurs, but we could also
// handle it differently, like on a separate save button click.
// For simplicity, we'll just log the edit here and assume it's saved.
console.log(`Todo at index ${index} was edited to: ${newText}`);
// If we wanted to actually save the edit back to the todos array,
// we could do something like this:
// this.$set(this.todos, index, { text: newText });
// But since we're using v-model, the edit is already reactive.
}
}
});
</script>
</body>
</html>
