如何修复Vue.js 3中substring方法无法正常工作的问题

错误原因 #

该报错的本质是调用substring方法的目标值为undefined，也就是props.post.body在代码运行的某个阶段不存在，具体有以下几个问题点：

• 逻辑冲突：模板中写了v-for="post in post"，如果你的propspost是单篇文章对象，这里的v-for完全是冗余逻辑，还会导致变量覆盖；如果propspost是文章列表数组，命名语义错误，也会导致取body字段的逻辑混乱。
• 缺省值处理缺失：异步拉取JSON数据需要时间，在数据还没返回、props还没被正确赋值的时候，props.post或者props.post.body本身就是undefined，直接调用substring就会触发报错。
• 长度判断缺失：如果文章正文本身长度不足100字符，额外拼接...不符合展示预期。

修复方案 #

如果这个组件是单篇文章卡片组件（父组件循环传递每篇post对象进来），直接删掉模板里冗余的v-for，然后给props加类型校验、给计算属性加兜底逻辑即可，修复后代码如下：

<template>
    <div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6">
        <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: {
        // 给props加类型校验和默认值，避免未传值的异常情况
        post: {
            type: Object,
            default: () => ({
                id: '',
                title: '',
                body: ''
            })
        }
    },
    setup(props) {
        const snippet = computed(() => {
            const body = props.post?.body || ''
            // 正文长度超过100再截断加省略号
            return body.length > 100 ? body.substring(0,100) + '...' : body
        }) 
        return{snippet}
    }
}
</script>

如果这个组件是文章列表组件，直接在组件内拉取整个文章数组，不需要props传post，把响应式数组命名为postList，修改v-for为v-for="item in postList" :key="item.id"，所有取字段的地方同步改成item.title、item.body即可。

内容的提问来源于stack exchange，提问作者David Andor