v-if 与异步 配合使用带来的问题及其解决

876 阅读1分钟

前提

这是要用到的data数据:itemList:[],后面将变为一个二维数组
这是v-if用到的地方:<div v-if="itemLists[0].length == 1">
这里的v-if要判断itemList[0]是否为只有一个元素的数组
在mounted时,会发出ajax请求并获取数据,并将itemList设置一个二维数组。

问题

image.png 问题:v-if在进行判断的时候,还没有获取数据,所以会报错

解决方案

<div v-if="itemLists[0] && itemLists[0].length == 1">
解释:这里的v-if,可以看作渲染了两次,第一次结果为[](所以报错),第二次为获取的值;现在这里进行判断,使得第一次渲染不会进行,就可以正常使用了。