CODEWITHSUNDEEP
vue.jsvue-component
stack
stack

Reputation: 841

How to defined a array list in props and data

In my project, I use vue.js.

I want to display content of list with nested loop。 In parent page, i have defined:

<template>
  <div>
    <detail-header></detail-header>
      ......
     <detail-list></detail-list>
  </div>
</template>

The component of detail-list is :

<template>
<div>
  <div v-for="(item, index) of list" :key="index">
  <div class="item-title border-bottom">
    <span class="item-title-icon"></span>
    {{item.title}}
  </div>
  <div v-if="item.children" class="item-children">
    <detail-list :list="item.children"></detail-list>
  </div>
</div>
</div>
</template>

<script>
  export default {
    name: 'DetailList',
    props: {
      list: Array
    },
   data () {
     return {
       list: [{
       title: 'adult',
       children: [{title: 'threePeople',children: [{ title: 'threePeople-w'}]}, {title: 'fivePeople'}]
       }, {
       title: 'student'
       }, {
       title: 'child'
       }, {
       title: 'offer'
       }]
    }
   } 
  }
</script>

unlucky, I got a error message:

Duplicated key 'list' of list: [{ in detail-list

who can help me ?

Upvotes: 0

Views: 1274

Answers (1)

Thoomas
Thoomas

Reputation: 2418

If you want this to work, keep the list in props (and remove it from DetailList's data) and define in your parent page's data.

So the first DetailList and its children will have the list as a prop.

So you'll have in the parent page :

<template>
  <div>
    <detail-header></detail-header>
      ......
     <detail-list :list="list"></detail-list>
  </div>
</template>

<script>
  export default {
    name: 'Parent',
    data () {
     return {
       list: [{ ... the list ... }]
     }
    }

Upvotes: 1

Related Questions