Soy nuevo en vuejs y estoy tratando de obtener publicaciones de un archivo JSON usando la API de composición, pero tengo un problema. Después de buscar la publicación, se muestran demasiados textos, que es lo que no quiero. He intentado arreglarlo usando el siguiente método:
<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>El problema aquí es que cuando ejecuto este código, aparece un error que dice:
TypeError: no se pueden leer las propiedades de undefined (leyendo 'subcadena')
Y ni siquiera sé cómo hacer esto en este momento. ¿Podría alguien por favor ayudar?
Podemos manejar el error indefinido comprobando el valor de las propiedades.
const snippet = computed(() => { let body = '' if (props.post && props.post.body){ body = props.post.body.substring(0,100) + '...' } return body })props.post.body no está undefined . Es mejor depurar por qué no está definido. Sin embargo, si se puede ignorar lo undefined , puede usar el siguiente operador de encadenamiento opcional de ES10.
props.post.body?.substring(0,100)