vue的渲染问题

2948985750
  • 8

我在组件中定义了数据,通过Ajax请求一个JSON文件为它赋值
就像这样:

可是在用v-for遍历渲染视图的时候控制台报错了且未渲染成功


错误截图:

烦请各位帮忙点拨一下,在这里先行拜谢了

问题已解决,是我犯了个低级错误,因为initdata是被JSON.parse处理过的,然后我多转换了一级,才出的这种错误,写程序心态真的很重要,心态爆炸的时候低级错误都发现不了

感谢各位了!!!

回复
阅读 528
4 个回答

没有看到initdata具体结构。

我们假如initdata是一个数组对象,就像[{},{},{}]这样,那么item就是里面的元素,是一个对象,index是数组下标,那么item[index]就是undefined,再进行取值就会报错,可以直接item.pic

item 就是遍历出来的每一组数据,不需要下标index

教你方法,错误已经在浏览器的报错中说明了,你可以网上翻译一下。比如你现在的错误翻译过来就是无法读取undefined的属性pic,并且下面表明了found in(在以下组件中找到),你就去你代码里对应组件里找,哪里引用了pic属性。可以看到你使用了item[index].pic那么说明item[index]undefined,为什么是undefined?有可能初始的时候你的initdata是一个空数组[],这时候每个item[index]不就都是undefined了么,所以会报这个错。这时候你就需要处理这个错误,可以在调用item[index].pic的组件上加上v-if判断,先判断item[index]不是undefined的时候再渲染。
因为你的数据是异步获取的,如果获取的数据不为空数组,那么在获取数据之后才会正常,但是如果获取的数据为空那么也会报错。

<img :src="item.pic" :alt="altText" />

你知道吗?

宣传栏