仅当您在Vue材质UI中单击选项卡时如何加载选项卡数据

Question

我正在使用带有实质性UI的vue js。

      <md-tabs md-sync-route>
        <md-tab id="tab-all" md-label="All"> <TableView /> </md-tab>
        <md-tab id="tab-severity" md-label="Emergency"> <TableView   :priority="'0'" /> </md-tab>
        <md-tab id="tab-timestamp" md-label="Alert" > <TableView  :priority="'1'" /> </md-tab>
        <md-tab id="tab-pre" md-label="Critical"> <TableView  :priority="'2'" /> </md-tab>
        <md-tab id="tab-hostname" md-label="Error"> <TableView :priority="'3'" /> </md-tab>
        <md-tab id="tab-appname" md-label="Warning"> <TableView :priority="'4'" /> </md-tab>
        <md-tab id="tab-procid" md-label="Notice"> <TableView :priority="'5'"/> </md-tab>
        <md-tab id="tab-msgid" md-label="Informational"> <TableView :priority="'6'"/> </md-tab>
        <md-tab id="tab-facilityid" md-label="debug"> <TableView :priority="'7'"/> </md-tab>
      </md-tabs>

这是选项卡的代码，现在的问题是我在具有不同数据但相同组件的每个选项卡上调用api。我只想在单击该特定选项卡时才调用aPI。不早于那之后，如果我再次单击它。有没有人有办法解决吗。谢谢。