Vue.js 组件不显示

Question

I'm having difficulties understanding where the problem is.

I have a component called PlayerTabs which has different tabs. One of them is Goals (Basketball). I want the component BasketballGoals.vue to appear in this tab.

In the component PlayerTabs I define the tabs in the template:

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

and import the component in the script:

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

and registered the BasketballGoals component Playertabs in components:

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

The BasketballGoals component starts like this:

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

Here's the full component .

I've been trying for hours now to make the component appear in the tab, but I can't make it work and don't get an error too. Can someone help me?

Answer 1

The corresponding component should go in v-tab-item element. Here is an example from the tutorial :

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

So, in your case:

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