javascript - 如何修复子字符串在 vue.js 3 中不起作用?
问题描述
我是 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:无法读取未定义的属性(读取“子字符串”)
我现在什至不知道该怎么做。有人可以帮忙吗?
解决方案
我们可以通过检查属性值来处理未定义的错误。
const snippet = computed(() => {
let body = ''
if (props.post && props.post.body){
body = props.post.body.substring(0,100) + '...'
}
return body
})
推荐阅读
- python - Python循环内存泄漏
- datatables - jQuery数据表不显示数据库中的数据
- java - 如何解决java中方法的通用输入参数
- c# - 从 DataTable 到 DataGridView 的字符串:“\n”不被解释为新行
- android - 使用签名版本设置 versionCode 的问题
- java - 如何通过 Axios 将标头发送到 Spring-Boot 应用程序?
- deployment - 构建失败 - apksigner.BAT 以代码 2 退出
- reporting-services - Dynamics CRM 在线报告:高级查找视图过滤
- ios - 如何找到 UITableViewCell 的 ViewController?
- java - 为什么循环迭代一次额外的时间?