0

我正在使用步进器组件，而不是对标题和内容进行硬编码，而是循环遍历对象数组。

步进器项目真的很好用

<v-stepper-items>
  <v-stepper-content
    v-for="(step, stepIndex) in steps"
    :key="stepIndex"
    :step="stepIndex"
  >
    <component :is="step.content"/>
  </v-stepper-content>
</v-stepper-items>

标题变得棘手。在这些标题之间应该是一个分隔组件，但是当我将两者都包装在一个包装元素中时，这会破坏 CSS。最后一项不应添加分隔线。

<v-stepper-header>
  <v-container v-for="(step, stepIndex) in steps" :key="stepIndex">
    <v-stepper-step :complete="currentStep > stepIndex" :step="stepIndex">
      {{step.header}}
    </v-stepper-step>
    <v-divider :v-if="stepIndex < steps.length - 1"></v-divider>
  </v-container>
</v-stepper-header>

如何在不将它们包装在容器中/破坏 CSS 的情况下遍历这些步进器标头？

更新

这是一个显示 CSS 问题的小代码笔。该v-container组件会破坏它。

https://codepen.io/pdntspa/pen/ZEYOZOP?editors=1010

4

1 回答 1

1

使用模板标签，例如<template v-for="(header, index) in headers">，模板标签不会显示在 HTML 中，不会影响您的布局，v-if如果需要，您甚至可以添加另一个模板标签，用条件包裹整个事物。

HTML：

<div id="app">
  <v-app id="inspire">
    <v-stepper v-model="e1">
      <v-stepper-header>
        <template v-for="(header, index) in headers">
          <v-stepper-step :step="index + 1">{{ header }}</v-stepper-step>
          <v-divider v-if="index < headers.length - 1"/>
        </template>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 2"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="2">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 3"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>

        <v-stepper-content step="3">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 1"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      e1: 0,
      headers: [
        'Step 1',
        'Step 2',
        'Step 3',
        'Step 4'
      ]
    }
  },
})

这也是您的 codepen的一个分支。

不过，有个小警告，<v-divider>由于您的 v-if 之前有多余的和不需要的冒号，您的情况不是 / 不起作用：:v-if

于 2019-12-13T08:40:14.710 回答