Recently starting out in vuejs, I am currently attempting to retrieve posts from a JSON file using the composition API. However, I have encountered a problem where too much text is being displayed after fetching the post data. This is not the desired outcome and I have been trying to address this issue using a specific method:
<template>
<div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6" v-for="post in post" :key="post.id">
<div class="md:flex">
<div class="md:flex-shrink-0" >
<img class="h-48 w-full object-cover md:h-full md:w-48" src="assets/store.jpg" alt="Man looking at item at a store">
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">News</div>
<router-link :to="{name: 'Details', params:{id: post.id}}"><strong>{{post.title}}</strong></router-link>
<p class="mt-2 text-gray-500">{{snippet}}</p>
</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
props:['post'],
setup(props) {
const snippet = computed(() => {
return props.post.body.substring(0,100) + '...'
})
return{snippet}
}
}
</script>
In implementing this code snippet, an error message emerges stating:
TypeError: Cannot read properties of undefined (reading 'substring')
Currently, I am unsure of how to resolve this issue. Can anyone provide assistance on this matter?