关于vue中报TypeError: Cannot read property ‘split‘ of undefined

<div v-if="ri.type.split('').slice(0).toString().indexOf('C') != -1"></div>目的：判断该字符串中是否含有C，如果为有，则返回该字符串的位置，否则返回-1结果：在模板中确实截取成功了，但是报了下面这个错误。原因：你没有判断数据来源是否为空。对字符串做slice时，没有判断其是否为空。解决办法：在数据前面

初晨未凉

3032人浏览 · 2020-12-25 18:30:49

初晨未凉 · 2020-12-25 18:30:49 发布

<div v-if="ri.type.split('').slice(0).toString().indexOf('C') != -1">
</div>

目的：判断该字符串中是否含有C，如果为有，则返回该字符串的位置，否则返回-1
结果：在模板中确实截取成功了，但是报了下面这个错误。
原因：你没有判断数据来源是否为空。对字符串做slice时，没有判断其是否为空。
解决办法：在数据前面的标签里面进行判断 v-if=“字符串内容”，即下面在该字符串处理的前面加上v-if="ri.type"即可。

<div v-if="ri.type">
		<div v-if="ri.type.split('').slice(0).toString().indexOf('C') != -1">
		<h3 class="text-title text-center">胆汁质</h3>
		<div class="report">
			<h5 class="text-info">优点</h5>
			<p class="report-factor">直率热情、精力旺盛、反应迅速有力、思维敏捷。</p>
			<h5 class="text-info">缺点</h5>
			<p class="report-factor">脾气急躁、易于冲动、理解问题容易粗枝大叶。</p>
		</div>
		<div class="report">
			<h5 class="text-info">行为表现</h5>
			<p class="report-factor">对待工作非常热情，反应快、行动敏捷、暴躁而有力；言语姿态都带有强烈的情绪表露；面对困难坚忍不拔，但工作带有周期性，精力耗尽时易失去信心。</p>
		</div>
	</div>
</div>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^