Nie wiem czy o to chodziło:
<template>
<div class="container">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<div>
<div class="form-group">
<label> podaj nowego todo'sa:</label>
<input type="text" v-model="newItem.title" class="form-control m-5" />
<button @click="Addtotodo" class="btn btn-primary">dodaj</button>
</div>
</div>
<div v-for="(todo,index) in Todos" v-bind:key="todo.id">
<a
class="btn btn-secondary"
><span>{{ todo.title }}</span>
<input v-model="todo.value" type="number" />
<button class="btn btn-secondary" disabled>id: {{todo.id}} </button>
<button class="btn btn-danger" @click="removetodo(todo,index)">delete</button>
</a>
</div>
<label>Zrobione todosy</label>
<div v-for="item in Done" :key="item.title">
<button class="btn btn-secondary" disabled>{{ item.title }}</button>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
Todos: [
{ id: 1, title: "first", value: 0 },
{ id: 2, title: "seckond", value: 0 },
],
Done: [],
newItem: {id:0, title: "", value: 0 },
};
},
methods: {
Addtotodo() {
this.newItem.id = this.Todos.length + 1;
this.Todos.push(this.newItem);
this.newItem = {};
},
removetodo(todo,index) {
this.Done.push(todo);
this.Todos.splice(index, 1);
},
},
};
</script>
<style scoped>
</style>