我正在尝试嵌套一个v-for循环,以便从我的API返回的每4个结果中,这些结果将集体排成一行。
<div v-for="(item, index) in this.info.length/4" :key="item">
<el-col v-for="thing in this.info" :key="thing">
{{ thing }}
</el-col>
</div>
我知道当前嵌套的v-for将打印该行的每个项目,我仍然需要对结果进行切片。但是,当我尝试这段代码时,出现以下错误:
vue.esm.js?efeb:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'info' of undefined"
由于某种原因,我无法在嵌套的v-for循环中访问this.info,大概是因为“ this”是其他东西,也许是父对象?请有人可以向我解释这是如何工作的,以及如何从嵌套的v-for子级访问数据。
感谢您的帮助。
答案 0 :(得分:2)
您有2个问题。
简单的一个
模板中没有this
,所以它是未定义的,这就是为什么会出现错误。您应该直接访问info
。 (而不是this.info
)
第二个问题-您的v-for
似乎要遍历数组。但是它的实际作用是迭代从0到info.length/4
的所有数字。因为如果info.length/4
为5,那么您的v-for
的评估结果为v-for="(item, index) in 5"
,但不确定这就是您的意思。