Блог

Я новичок в vuejs и пытаюсь извлекать сообщения из файла JSON с помощью API композиции, но у меня возникла проблема. После получения сообщения отображается слишком много текстов, чего я не хочу. Я попытался исправить это, используя следующий метод:

 <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>
 

Проблема здесь в том, что, когда я запускаю этот фрагмент кода, я получаю сообщение об ошибке:

Ошибка типа: Не удается прочитать свойства неопределенного (чтение «подстроки»)

И я даже не знаю, как это сделать в данный момент. Не мог бы кто-нибудь, пожалуйста, помочь?

Мы можем справиться с неопределенной ошибкой, проверив значение свойств.

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

props.post.body не undefined. It's better to debug why it's undefined. Nevertheless, if the определено » может быть проигнорировано, вы можете использовать следующий дополнительный оператор цепочки ES10.

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