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

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

vue.js vuejs2

Vue.js-如何从嵌套的v-for迭代中的子组件访问数据,vue.js,vuejs2,element-ui,Vue.js,Vuejs2,Element Ui,我正在尝试嵌套一个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> {{thing}} 我知道目前嵌套的v-for将打

我正在尝试嵌套一个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>


{{thing}}

我知道目前嵌套的v-for将打印该行的每个项目，我仍然需要对结果进行切片。但是，当我尝试此代码时，会出现以下错误：

vue.esm.js？efeb:610[vue warn]：呈现错误：“TypeError:无法读取未定义的属性“info”

出于某种原因，我无法访问嵌套v-For循环中的this.info，可能是因为“this”是其他东西，可能是父对象？请有人向我解释一下这是如何工作的，以及我如何从嵌套的v-for-child访问数据

谢谢您的帮助。

您有两个问题

简单的一点- 模板中没有

此

，因此它未定义，因此会出现错误。您应该直接访问

info

。（而不是

this.info

）

第二个问题-您的

v-for

看起来像是要在数组上迭代。但它实际做的是迭代所有数字，从0到

info.length/4

。因为如果

info.length/4

是，比如说，5，那么你的

v-for

计算结果是

v-for=“（项目，索引）在5”

中，我不确定你的意思。

你有两个问题