Vue. js компонент не отображается - PullRequest
Новая
       13

Vue. js компонент не отображается

0 голосов
/ 29 января 2020

Мне трудно понять, в чем проблема.

У меня есть компонент с именем PlayerTabs, который имеет разные вкладки. Одним из них является гол (баскетбол). Я хочу, чтобы компонент BasketballGoals.vue отображался на этой вкладке.

Here are the tabs

В компоненте PlayerTabs я определяю вкладки в шаблоне: 

  <v-tab title="Goals (Basketball)">
    <app-basketball-goals></app-basketball-goals>
  </v-tab>

и импортируйте компонент в сценарии: 

import BasketballGoals from "./PlayerBasicInfo/BasketballGoals.vue";

и зарегистрируйте компонент BasketballGoals Playertabs в компонентах: 

export default {
  components: {
    appPlayers: Players,
    appTimetables: Timetables,
    appHistories: Histories,
    appPhysicalGoals: PhysicalGoals,
    appBasketballGoals: BasketballGoals,
    appScholarship: Scholarship,
  },

Компонент BasketballGoals запускается так: 

<script>
    export default {
        name: 'goals',
        data: function() {
            return {
                times: [{
                    hour: '00',
                    isActive: false
                }, {

Вот полный компонент .

Я часами пытался заставить компонент появиться на вкладке, но не могу заставить его работать и не получить ошибку тоже. Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 29 января 2020

Соответствующий компонент должен go в v-tab-item элемент. Вот пример из учебника : 

<v-tabs
  color="cyan"
  dark
  slider-color="yellow"
>
  <v-tab ripple>
    Item 1
  </v-tab>
  <v-tab ripple>
    Item 2
  </v-tab>
  <v-tab-item>
    <v-card flat>
      <v-card-text>Contents for Item 1 go here</v-card-text>
    </v-card>
  </v-tab-item>
  <v-tab-item>
    <v-card flat>
      <v-card-text>Contents for Item 2 go here</v-card-text>
    </v-card>
  </v-tab-item>  
</v-tabs>

Итак, в вашем случае: 

<v-tab-item>
  <app-basketball-goals></app-basketball-goals>      
</v-tab-item>
...