Vue v-for Cannot read property ‘xxx‘ of null

问题

今天用vue渲染个列表，可发现怎么也渲染不出来。

F12打开控制台 发现 有报错 Cannot read property 'xxx' of null

前端我用的标签是

v-for="(problem, index) in xfwtxsgzlb"

报Cannot read property 'problem' of null

排查

于是排查后端返回，奇怪了，返回了5条数据啊，怎么会null呢

然后console.log 打印 ，也能打印出值啊，更奇怪了！

原因

后来仔细排查发现返回的5条数据后面还有一条 值为null。好了，

原因找到了，就是一共返回了6条，其中一条为null。

找到问题了就好解决了。

解决

一，后端解决，返回数据时过滤掉为null的数据，这是正经的解决方式。

二，前端解决，v-for那个标签里面在包一层，如下图

但这样有个弊端，如有分页逻辑的话条数会有不准，因为你过滤掉了为null的那一条。对与后端来说它是一条正经的数据，所以最好还是后端解决吧。

看网上好多帖子都说 v-for 后面跟个 v-if 可是我这么写 提示语法错误。