다음/이전 단추를 클릭하여 진행률 표시줄 전환

다음/이전 단추를 클릭하여 진행률 표시줄 전환

다음/이전 버튼을 클릭하여 하단의 진행 표시줄 데이터를 첫 번째/초 원으로 전환하려면 어떻게 해야 합니까?아마 건축물을 바꿔야 할 것 같습니다.앱에 로직을 구현해야 합니까?vue 파일?이제 원을 클릭해도 시각화되는 단계에 따라 녹색으로 변경되지 않습니다.https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/App.vue

<template>
  <div class="container">
    <FinalStep v-if="finalStep" />
    <div class="wrapper" v-else>
      <Form
        @final="isFinalStep"
        @previous="previousStep"
        @next="nextStep"
        :currentStep="currentStep"
      />
      <ProgressBar />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import Form from "./components/Form.vue";
import Step1 from "./components/Step1.vue";
import Step2 from "./components/Step2.vue";
import FinalStep from "./components/FinalStep.vue";
import ProgressBar from "./components/ProgressBar.vue";
export default {
  name: "App",
  data() {
    return {
      user_detail1: {
        firstName: "",
        lastName: "",
      },
      user_detail2: {
        paymentAmount: "",
        accountNumber: "",
      },
      finalStep: false,
      steps: [Step1, Step2],
      stepIndex: 0,
    };
  },
  provide() {
    return {
      firstName: ref(this.user_detail1.firstName),
      lastName: ref(this.user_detail1.lastName),
      paymentAmount: ref(this.user_detail1.paymentAmount),
      accountNumber: ref(this.user_detail1.accountNumber),
      next: this.nextStep,
      previous: this.previousStep,
      isFinalStep: this.isFinalStep,
    };
  },
  components: {
    Form,
    ProgressBar,
    FinalStep,
  },
  methods: {
    isFinalStep() {
      this.finalStep = true;
    },
    nextStep() {
      if (this.stepIndex < 1) {
        this.stepIndex++;
      }
      return this.stepIndex;
    },
    previousStep() {
      if (this.stepIndex > 0) {
        this.stepIndex--;
      }
      return this.stepIndex;
    },
  },
  computed: {
    currentStep() {
      return this.steps[this.stepIndex];
    },
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  padding: 20px;
  width: 80%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container {
  margin: 0 auto;
}
</style>

당신이 필요로 하는 모든 것은 이미 거기에 있습니다.

다음과 같이 변경하면 됩니다.

인App.vue

<ProgressBar :current-step="stepIndex"/>

인ProgressBar.vue

 <ul class="progressbar">
    <li
      @click.prevent="previousStep()"          
      :class="{ active: currentStep == 0 }"
    ></li>
    <li
      @click.prevent="nextStep()"          
      :class="{ active: currentStep == 1 }"
    ></li>
  </ul>

그리고 추가합니다.currentStep버팀목

props: {
    currentStep: {
      type: Number,
      required: true
    }
  },  

업데이트된 코드 및 상자

언급URL : https://stackoverflow.com/questions/75627456/toggling-progress-bar-by-clicking-next-previous-button