Here is the code for the "singleCard" component. When passing {{card.title}} and {{card.body}}, an error occurs:
**Error in render: "TypeError: Cannot read property 'title' of undefined"
found in
---> <SingleCard> at src/components/singleCard.vue
<App> at src/App.vue
<Root>**
<template>
<div id="single-card">
<h1>{{ card.title }}</h1>
<article>{{ card.body }}</article>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id,
card: {}
}
},
created() {
axios.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(response => {
console.log(response);
this.card = response.body;
})
}
}
</script>