如何在道具和数据中定义数组列表

Question

在我的项目中，我使用vue.js.

我想用嵌套循环显示列表的内容。在父页面中，我定义了：

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

详细列表的组成部分是：

<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>

不走运，我收到一条错误信息：

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

谁能帮我 ？

Answer 1

如果你想要这个，可以将list保存在道具中（并从DetailList的数据中删除它）并在你的父页面数据中定义。

因此，第一个DetailList及其子女将有list作为道具。

所以你将在父页面中：

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

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