I am facing an issue with a v-for loop in my project. The loop is supposed to iterate through objects in a list of todos fetched from the backend. These objects are then passed down to a child component, which displays each todo individually. However, I have noticed that when inspecting the app using vue devtools, only one property of the todo object is being accessed - the 'todo' value. Ideally, each todo should have three properties: id, completion, and todo. Any suggestions on how to resolve this?
Main Component with the v-for Loop
<template>
<div>
<CreateTodo />
<hr />
<div class="TodoContainer">
<div v-for="todo in todos" v-bind:key="todo.id" class="TodoComponent">
<SingleTodo v-bind="todo" />
</div>
</div>
<hr />
</div>
</template>
<script>
import CreateTodo from "./CreateTodo";
import SingleTodo from "./SingleTodo";
import { ref, onMounted } from "vue";
//
export default {
components: {
CreateTodo,
SingleTodo,
},
setup() {
const API_URL = "http://127.0.0.1:8000/api/todo-list/";
const todos = ref([]);
async function getTodos() {
const response = await fetch(API_URL);
const json = await response.json();
todos.value = json;
}
onMounted(() => {
getTodos();
});
return {
todos,
getTodos,
};
},
};
</script>
Child Single Todo Component
<template>
<div class="TodoComponent">
<router-link :to="`/rest-todo/${todo.id}`" class="TodoValue">
id: {{ todo.id }}
</router-link>
<div
class="TodoValue"
:class="{
completeTrue: todo.completion == true,
completeFalse: todo.completion == false,
}"
>
{{ todo }}{{ completion }}
</div>
</div>
<div>
</div>
</template>
<script>
export default {
props: ["todo"],
};
</script>