Рекурсивный выпадающий компонент с использованием Quasar Vue - PullRequest
Новая
       34

Рекурсивный выпадающий компонент с использованием Quasar Vue

0 голосов
/ 16 декабря 2018

Мне нужно создать выпадающий компонент, который можно использовать для выбора вложенных значений, но я хочу создать каркасную структуру, которую можно масштабировать в соответствии со структурой 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.
...