三层数据渲染页面报错：Invalid prop: custom validator check failed for prop “percentage“.

项目场景：

用三级数据渲染页面（一个数据里包了child子列表，再child里又包含了子列表）如下：要渲染 “初一”

{//这里是第一级数据---------------------------------
“code”:200,
“msg”:“操作成功”,
“data”:{
“attrclassify”:[//这里是第二级数据------------------
{
“id”:1,
“name”:“年级”,
“parent_id”:0,
“child”:[//第三级数据-------------------------------
{
“id”:1,
“name”:“初一”
}]}],

---

问题描述：

通常会出现这样的报错，如下：

或者：

---

原因分析：

这是你用三级套用的数据时，渲染可能会有undefined的时候，就是拿不到你的数据（我下面数据渲染是再次赋过值的，this.hmwStudyTop = data.course; 此时他已经相当于一个二级数据了）

---

解决方案：

这个时候就需要用v-if判断一下(ps:v-show不行哦！！)，你要的数据是否存在即可

如下：（这里对应第一张报错图）

 <van-progress  
          v-if="hmwStudyTop.progress_rate"
            inactive
            :percentage="Number(hmwStudyTop.progress_rate)"
          />

延伸：

如果在for循环里用三级数据渲染报这个错的话，v-if要写在循环体里，且判断的时二级数据的长度，及你要的数据的上一级的长度，如下：

<li         v-if="item.teachers_list.length > 0"
            v-for="(item, index) in hmwList2"
            :key="index"
            @click="hmwJump(item)"
          >
              <img :src="item.teachers_list[0].teacher_avatar" alt="" />
              <span>{{ item.teachers_list[0].teacher_name }}</span>
              
</li>

最后

希望大家的问题都能解决哦！有更好的方法还望不吝赐教！