vue渲染成功，但是控制台报错

Question

<div class="serviceType" v-if="payIndex===0 && cbList[shipIndex].partnerName !== undefined" v-html="cbList[shipIndex].partnerName" @click="shipShow"></div>
<div class="serviceType" v-else-if="payIndex===0 && cbList[shipIndex].partnerName === undefined" v-html="cbList[shipIndex].senderName" @click="shipShow"></div>
<div class="serviceType" v-else-if="payIndex===1" v-html="shipType[shipIndex].partnerName" @click="shipShow"></div>

渲染成功了，但是控制台报错

cbList和shipType初始化是空数组，在mounted中赋值，请大神指导一下，谢谢

Answer 1

<div class="serviceType" v-if="payIndex===0 && cbList[shipIndex] && cbList[shipIndex].partnerName !== undefined" v-html="cbList[shipIndex]?cbList[shipIndex].partnerName:''" @click="shipShow"></div>
<div class="serviceType" v-else-if="payIndex===0 && cbList[shipIndex] && cbList[shipIndex].partnerName === undefined" v-html="cbList[shipIndex]?cbList[shipIndex].senderName:''" @click="shipShow"></div>
<div class="serviceType" v-else-if="payIndex===1" v-html="shipType[shipIndex]?shipType[shipIndex].partnerName:''" @click="shipShow"></div>

Answer 2

这种一般都是尝试访问一个undefined的某个属性暴露的错误，推荐使用条件渲染以及正向反查 ，保证访问的时候这个对象真实存在，

Answer 3

这个问题一般是json数据是由后台请求提供，但在页面加载的时候，还没有这个对象。
解决办法有几个，各有优缺点：
1.一般在mounted方法中获取数据的，采用同步，等数据拿到后，再加载页面，可以防止报错，页面出现脚本{{XXX}}等。缺点是：数据大会影响页面加载的速度。
2.一般报错都是对data项，动态新增属性，可以这样定义，如下图，防止出现undefined.属性的情况出现，就不会报错了。缺点是：每个属性都要先写好，烦，Vue.set方法等于废了。

3.用一个标示，放在data根节点下面 ，设isload=false，当数据拿到后，设置isload=true
页面显示的时候，在最外面的根节点html标签上加上 v-if='isload'