问题描述

报错内容：

[Vue warn]: Error in render: 
"TypeError: Cannot read properties of undefined (reading 'cnName')"

• 在写博客系统的时候，在文章详情页，需要获取文章中分类的名称，则使用的方式是：article.category.cnName
• 但是在运行时就会报错，说无法找到cnName。

出现原因

• 第一种情况：category没取到。
• 第二种情况：category有，但是无法读取category中的属性。
• 本次我就是遇到了第二种问题
• 这个问题实际上是因为：
  • 进入页面以后，直接获取article.category.cnName实际上是没有的，进入页面以后向后台发送请求，获取文章详情，然后赋值到article上，如果dom渲染的比较快，会导致还没有数据，就已经渲染，所以没有对应属性值。

问题解决

提供一下两种解决方式

• ① 等待拿到后端数据以后，在渲染对应DOM
  • 使用v-if或者v-show指令
  • 这种方式有个缺点，如果这一块本身是动态的，可能导致页面不友好，比如突然页面弹开。或者底部栏和顶部栏合并等不友好的效果

  <div v-if="isLoading">
  		// 这里是显示的内容比如
  		<div> {{article.category.cnName}} </div>
  </div>

<script>
	this.isLoading = false;
	发送后端请求() {
		请求成功以后
		this.isLoading = true;
	}
</script>

• ② 使用对象复制，类似延迟获取的思路
  • 使用JS中的对象复制方法，复制新的category对象，然后进行取值操作。
  • {{ Object.assign({},article.category).cnName}}
  • 这种方式确实解决了这个问题