Vue.js 组件不显示

Posted 2023-02-23

【中文标题】Vue.js 组件不显示

【英文标题】：Vue.js component does not show up

【发布时间】：2020-05-14 23:09:36

【问题描述】：

我很难理解问题出在哪里。

我有一个名为PlayerTabs 的组件，它有不同的选项卡。其中之一是目标（篮球）。我希望组件 BasketballGoals.vue 出现在此选项卡中。

在组件 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
                , 

这是完整的component。

我已经尝试了几个小时以使组件出现在选项卡中，但我无法使其工作并且也没有出现错误。 有人可以帮我吗？

【问题讨论】：

您在components 中注册了BasketballGoals 组件PlayerTabs 吗？

@winiar 是的，请参阅编辑后的帖子

【参考方案1】：

对应的组件应该放在v-tab-item元素中。这是来自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>

所以，在你的情况下：

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