时间戳

首页 > 解决方案 > 当下一页不同时，如何将按钮链接到vuejs2中的“下一页”

vue.js - 当下一页不同时，如何将按钮链接到vuejs2中的“下一页”

问题描述

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

标签： vue.jsvuejs2vue-componentvue-router

解决方案

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

模板：

 <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);
  },
},

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

推荐阅读