How do I fix substring not working in vue.js 3?

Question

I'm new in vuejs, and I'm trying to fetch posts from a JSON file using the composition API, but I'm having a problem. After fetching post, too many texts are being displayed, which is what I don't want. I have tried to fix it using the following 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>

The problem here is that when I run this piece of code, I get an error that says:

TypeError: Cannot read properties of undefined (reading 'substring')

And I don't even know how to go about this at the moment. Could someone please help?

Looks like props.post.body is not defined. Please verify that props.post.body has a string value. — Hassan Imam
– Hassan Imam, Commented Sep 23, 2021 at 5:53

Hasan Khan · Accepted Answer · 2021-09-23 06:12:35Z

1

We can handle the undefined error by checking the properties value.

const snippet = computed(() => {
    let body = ''
    if (props.post && props.post.body){
      body = props.post.body.substring(0,100) + '...'
    }
    return body
})

answered Sep 23, 2021 at 6:12

Hasan Khan

7331 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nice Books · Accepted Answer · 2022-06-13 08:17:14Z

1

props.post.body is undefined. It's better to debug why it's undefined. Nevertheless, if the undefined can be ignored you can use the following ES10 optional chaining operator.

props.post.body?.substring(0,100)

edited Jun 13, 2022 at 8:17

answered Sep 23, 2021 at 8:27

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

Comments

Min Khant · Accepted Answer · 2023-05-11 14:55:44Z

0

return String(props.post.body).substring(0,100) + '...';

answered May 11, 2023 at 14:55

Min Khant

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How do I fix substring not working in vue.js 3?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related