如何修复子字符串在 vue.js 3 中不起作用？答案

【问题标题】：How do I fix substring not working in vue.js 3?如何修复子字符串在 vue.js 3 中不起作用？
【发布时间】：2021-11-16 12:51:42
【问题描述】：

我是 vuejs 的新手，我正在尝试使用组合 API 从 JSON 文件中获取帖子，但我遇到了问题。获取帖子后，显示的文本太多，这是我不想要的。我尝试使用以下方法修复它：

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

这里的问题是，当我运行这段代码时，我收到一条错误消息：

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

我现在什至不知道该怎么做。有人可以帮忙吗？

【问题讨论】：

看起来props.post.body 没有定义。请验证props.post.body 是否有字符串值。

标签： javascript json vue.js typeerror vuejs3

【解决方案1】：

我们可以通过检查属性值来处理未定义的错误。

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

【讨论】：

【解决方案2】：

props.post.body is undefined. It's better to debug why it's undefined. Nevertheless, if the undefined` 可以忽略你可以使用下面的ES10 可选链接操作符。

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

【讨论】：

感谢您的输入，我已经尝试了 ES10 可选链接运算符，它不再输出任何错误，而是显示未定义的带有连接点的未定义而不是 sn-p，这应该出现在sn-p。
然后你需要发布代码（可能在一个新问题中），你在哪里使用组件并传递道具。