Vue.js-如何在嵌套v-for迭代中从子组件访问数据

Question

我正在尝试嵌套一个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子级访问数据。

感谢您的帮助。

Answer 1

您有2个问题。

简单的一个 模板中没有this，所以它是未定义的，这就是为什么会出现错误。您应该直接访问info。 （而不是this.info）

第二个问题-您的v-for似乎要遍历数组。但是它的实际作用是迭代从0到info.length/4的所有数字。因为如果info.length/4为5，那么您的v-for的评估结果为v-for="(item, index) in 5"，但不确定这就是您的意思。