Таблица Vuetify не будет отображаться при размещении внутри другого компонента. - PullRequest
Новая
       6

Таблица Vuetify не будет отображаться при размещении внутри другого компонента.

0 голосов
/ 06 марта 2020

Я сделал компонент таблицы в своем проекте, так как у меня есть несколько таблиц, которые я хочу, чтобы все выглядели одинаково.

Я вставляю свою таблицу на свою страницу, и все работает нормально. На столе есть диалоговое окно, которое открывается правильно, но внутри этого диалога находится еще один из моих компонентов таблицы, и он не отображается. Это сработает, если я изменю имя компонента и у меня будет два отдельных экземпляра, но это не то, что я пытаюсь сделать.

Как мне заставить мою таблицу работать со всеми компонентами? Использование Vue CLI.

Компонент таблицы: 

<template>
  <v-data-table :headers="headers" :items="items" :no-data-text="noDataText" :dark="dark">
    <template v-slot:top>
      <v-toolbar :dark="dark" flat>
        <v-toolbar-title>{{ title }}</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-btn @click="dialog=true" color="success" class="mr-2">
          Load Default Frames
          <v-icon right>mdi-download</v-icon>
        </v-btn>
        <v-btn color="primary" class="mr-2">
          Create New Frame
          <v-icon right>mdi-image-plus</v-icon>
        </v-btn>
        <Dialog v-model="dialog" />
        <!-- <Frame v-model="dialog" :editedFrame="editedFrame" :oldIndex="oldIndex" @close="close" />
        <DefaultFrames v-model="defaultFramesDialog" :selectable="true" :items="defaultFrames" />-->
      </v-toolbar>
    </template>
  </v-data-table>
</template>

Компонент диалога: 

<template>
  <v-dialog v-model="dialog">
    <v-card :dark="dark">
      <v-card-title>
        {{ name}}
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-btn icon @click="dialog = false">
          <!-- <v-icon @click="$emit('close')">mdi-close</v-icon> -->
        </v-btn>
      </v-card-title>
      <Table :is="child_component" :headers="frameHeaders" :items="defaultFrames" />
      <v-card-actions>
        <v-btn @click="log">Log</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
...