こんな感じで、pushする際はref関数でvalueにアクセスして足す。 v-forの中で、todoを取り出せているから、それはvalueはいらない これが基本
<script setup> import { ref } from 'vue' // give each todo a unique id let id = 0 const newTodo = ref('') const todos = ref([ { id: id++, text: 'Learn HTML' }, { id: id++, text: 'Learn JavaScript' }, { id: id++, text: 'Learn Vue' } ]) function addTodo() { todos.value.push({id: 5, text: newTodo.value}); newTodo.value = '' } function removeTodo(todo) { todos.value = todos.value.filter((t) => t.text !== todo.text) } </script> <template> <form @submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add Todo</button> </form> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} <button @click="removeTodo(todo)">X</button> </li> </ul> </template>
公式サイト見ると良い
早い