0

Hi I'm doing my project with Vuejs 2 and Vuetify and one page uses v-stepper component for steps so it goes to next slide or go back. The Problem that I have is when I go to the next slide the card/content won't scroll up, so user has to manually scroll up to see the card/content. I tried with scrollTo() but with v-for and v-stepper, I'm kinda stuck. Here's what I meant. enter image description here

What I want is, when I go to next slide, I want the card/content automatically scroll up like second pict. enter image description here

and here is my code

<template>
  <v-stepper v-model="slide" flat vertical>
    <template v-for="(method, index) in methods">
      <v-stepper-step
        color="#7eba24"
        :complete="slide > index + 1"
        :step="index + 1"
        :key="index"
        @click="slide = index + 1"
      >
        <div class="font-weight-medium cursor-pointer ml-4">
          {{ method.step }}
        </div>
      </v-stepper-step>

      <v-stepper-content :step="index + 1" :key="method.name">
        <v-card elevation="5" class="ma-3 scrollY" height="100%">
          <v-col>
            <v-row class="pa-5">
              <v-col class="my-auto">
                <v-img
                  class="mx-auto"
                  max-width="230"
                  :src="require(`../assets/methods/${method.img}.png`)"
                ></v-img>
              </v-col>
              <v-col>
                <p class="text-justify">
                  {{ method.desc }}
                </p>
              </v-col>
            </v-row>
          </v-col>
          <v-row class="ma-3 pr-4 pb-5">
            <v-spacer></v-spacer>
            <v-btn
              class="text-capitalize"
              text
              @click="slide -= 1"
              :disabled="slide == 1"
              >Zurück
            </v-btn>

            <v-btn
              class="text-capitalize"
              color="#7eba24"
              @click="
                slide += 1;
                goto(method.id);
              "
              :disabled="slide == 12"
            >
              Weiter
            </v-btn>
          </v-row>
        </v-card>
      </v-stepper-content>
    </template>
  </v-stepper>
</template>
<script>
export default {
  data() {
    return {
      slide: 1,
      methods: [
        {
          step: "Lorem 1",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 1,
        },
        {
          step: "Lorem 2",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 2,
        },
        {
          step: "Lorem 3",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 3,
        },
        {
          step: "Lorem 4",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 4,
        },
        {
          step: "Lorem 5",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 5,
        },
        {
          step: "Lorem 6",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 6,
        },
        {
          step: "Lorem 7",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 7,
        },
        {
          step: "Lorem 8",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 8,
        },
        {
          step: "Lorem 9",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 9,
        },
        {
          step: "Lorem 10",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 10,
        },
        {
          step: "Lorem 11",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 11,
        },
        {
          step: "Lorem 12",
          desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat ullamcorper nulla. Maecenas tristique dignissim porta. Vestibulum laoreet ante sed vestibulum tincidunt. Nam euismod euismod neque ac mollis. Aliquam ac libero diam. Vivamus vitae enim imperdiet est vestibulum auctor vel eu odio. Nunc vitae sodales ipsum.",
          img: "dummy",
          id: 12,
        },
      ],
    };
  },
};
</script>
<style scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>

Killian Pierce
  • 121
  • 3
  • 12

0 Answers0