Question

我在Vuejs中有一系列选项卡，如下所示。我想在每个选项卡的内容下方添加按钮，以转到“下一个”和“上一个”选项卡，并用下一个（或上一个）选项卡的标题进行标记。问题是我并非总是根据某些情况显示所有选项卡。

那我可以使用哪种方法以正确的路线显示适用的按钮？我从每个vue文件上的硬编码按钮开始，指向下一个选项卡的路线，但是由于选项卡并不总是相同，因此这对我而言不再有效。

 <template>
<div>       
        <v-tabs color="" slider-color="blue" grow="" style='box-shadow:0 0px 0 1px #ddd;'>
            <v-tab to="/customer/info" ripple=""> General Information</v-tab>
            <v-tab to="/customer/quotes" ripple="" v-if="showQuotes">Quotes</v-tab>
            <v-tab to="/customer/events" ripple="">Events</v-tab>
            <v-tab to="/customer/note" ripple="">
                <v-badge color="indigo">
                    <span slot="badge">{{notesCounter}}</span>
                    Notes
                </v-badge>
            </v-tab>
            <v-tab to="/customer/more" ripple="">More</v-tab>
        </v-tabs>
        <router-view></router-view>
    </div>
</template>

Answer 1

您可以将选项卡存储在数组中，并使用它来计算要渲染的数组。

模板：

 <template>
   <div>       
    <v-tabs color="" slider-color="blue" grow="" style='box-shadow:0 0px 0 1px #ddd;'>
      <v-tab v-for="(tab, index) in tabsToShow"
             :to="tab.to" ripple="">{{tab.name}}</v-tab>
    </v-tabs>
    <router-view></router-view>
    <a v-if="selectedTabIndex > 0"
       :href="tabsToShow[selectedTabIndex - 1].to">
      {{tabsToShow[selectedTabIndex - 1].name}}</a>
    <a v-if="selectedTabIndex < tabsToShow.length - 1"
       :href="tabsToShow[selectedTabIndex + 1].to">
      {{tabsToShow[selectedTabIndex + 1].name}}</a>
  </div>
</template>

脚本：

data() {
  return {
    tabs: [
      {
        to: '/customer/info',
        name: 'General Information',
        visible: true,
      },
      // other tabs
    ],
    selectedTabIndex: 0,
  }
},
computed: {
  tabsToShow() {
    return this.tabs.filter(tab => tab.visible);
  },
},

然后，您所需要做的就是以某种方式获取已过滤数组中当前选定选项卡的索引。例如，点击。

当下一页变化时，如何将按钮链接到vuejs2中的“下一页”

1 个答案: