I'm encountering an issue with accessing an object in Vue. Here is the code snippet:
App:
<template>
<div class="container">
<HeaderComp title="Task Tracker"></HeaderComp>
<TasksComp :tasks="tasks"></TasksComp>
</div>
</template>
<script>
import HeaderComp from "./components/Header.vue";
import TasksComp from "./components/Tasks.vue";
export default {
name: "App",
components: {
HeaderComp,
TasksComp,
},
data() {
return {
tasks: [],
};
},
created() {
const promise = fetch("https://jsonplaceholder.typicode.com/posts/1").then(
(res) => res.json()
);
const handle = async () => {
try {
const data = await promise;
this.tasks = data;
console.log(data);
} catch (error) {
console.error(error);
}
};
handle();
},
};
</script>
Tasks:
<template>
<main>
<div v-for="task in tasks" :key="task">
<TaskComp :task="task"></TaskComp>
</div>
</main>
</template>
<script>
import TaskComp from "./Task.vue";
export default {
name: "TasksComp",
props: ["tasks"],
components: {
TaskComp,
},
};
</script>
Task:
<p>{{ task.body }}</p>
</template>
<script>
export default {
name: "TaskComp",
props: ["task"],
};
</script>
I've fetched and handled a JSON response, converted it into a JavaScript Object, and set it as the value for the array tasks in the data() method. Within Tasks.vue, I iterate over each element (in this case just one, called task) within tasks. The individual task object is passed down as a prop to Task.vue, where the prop is accessed to display the body property within a paragraph tag.
However, despite all this setup, I'm unable to see the content of the body property. Any insights on what might be causing this issue would be greatly appreciated. Thank you!
I've verified that body is indeed a valid property, checked for potential type coercion or syntax errors, reviewed naming conventions, and even sought help from ChatGPT without success.