使用类星体Vue的递归下拉组件

Question

我需要创建一个下拉组件，该组件可用于选择嵌套值，但是我想创建一个骨架结构，可以根据传递给

的json结构进行缩放

模板结构为：

<template>
  <div >
    <keep-alive>
      <q-btn-dropdown label="Select">
        <q-list link>
            <q-item v-for="(value, key, index) in schemaParam" :key="index">
            <q-item-main>
                <q-item-tile label @click.native="toggleChildren(value)">{{ key }} </q-item-tile>
                <DropDownCommon v-if="showChild" :childData="value"></DropDownCommon>
            </q-item-main>
            </q-item>
        </q-list>
        </q-btn-dropdown>
        </keep-alive>
  </div>
 </template>

export default {
name: 'DropDownCommon',
props: ["value", "childData"],
data: function() {
 return {
  schemaParam: {
    "a":{
      "field1": 'col1',
      'field2':'col2'
    },
    "c":{
          "col1": {
            'field1': 'ft1',
            'field2': 'ft2'
          },
          'col2': {
            'field3': 'ft3',
            'field4': 'ft4'
          }
        }
  },
  showChild: false,
}

 methods:{
  toggleChildren(param) {
   this.showChild = !this.showChild;
  }
 }

 mounted():{
  this.schemaParam = this.childData;
 }
}

The problem is that whenever I select an inner component the parent instance is destroyed and it only shows the current rendered component.Any help is appreciated. Thanks in advance.