vue子组件循环赋值问题

asdfgh
  • 104

子组件循环赋值问题
子组件需要接收不同格式的对象,父组件组装后通过一个对象传递过去达到需求渲染,
问题是遇到多个对象组装的时候对象循环赋值问题,代码如下:

// template
<div v-for=“(item, index) in info”>
    <child :data="'data'+index"></child> // 会报错 提示data0必须是第一个对象 如:data0 = {title:xx, data: [] }
</div>

script:
Mounted () {
  this.listInfo()
},
Method: {
    listInfo () {
         // 模拟数据接口请求的数据
        const testdata  = [{name: xx, data: [{}]}]
       testdata.forEach((item, index) => {

        this[‘data’+index] = item; // 基础数据
        this[‘data’+index].yar = [2,3,4,5]; // 通过其他方法组装的数据 最后赋值给this.data0
        
      })
回复
阅读 3k
4 个回答

你这样试一下,对不对。

<div>
    <div v-for="(item, index) in info">
        <child :data="'data'+index"></child>
    </div>
</div>

child组件的data prop接受类型有限制吧

<div v-for=“(item, index) in info”>
    <child :data="'data'+index"></child> // 会报错 提示data0必须是第一个对象 如:data0 = {title:xx, data: [] }
</div>

v-for里面的“”不对吧,中文字符

我猜测你这边是需要先在 data 中定义对象

// ...vue-cli

data(){
    return {
        data0: {},
        data1: {},
    }
}

或者用 this.$set(target, propertyName/index, value)
https://cn.vuejs.org/v2/api/#...

宣传栏