[Vuejs]-Button prev and next in stepper vue

by

-1👍

Please start with Vue Basics

And check the great Vue.js Tutorial

Here is a very basic playground with your code

const App = {
  data() {
    return {      
      activeIndex: 0, 
      steps: [ 'Шаг 1', 'Шаг 2', 'Шаг 3' ]
    }
  },
  methods: {
    prev() {
      this.activeIndex--;
    },
    reset() {
      this.activeIndex == 0;
    },
    nextOfFinish() {
      this.activeIndex++;
    },
    setActive(idx) {
      this.activeIndex = idx;
    }
  },
  computed: {
   
  }
}

Vue.createApp(App).mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
li.active { font-weight: bold; }
<div id="app" v-cloak>
<div class="steps-content">
    activeIndex: {{ activeIndex }}
</div>

<ul class="steps-list">
  <li v-for="(step, index) in steps" 
    :class="['steps-item', index == activeIndex ? 'active':'']">
    <span>{{index + 1}}</span> {{step}}</li>
</ul>
<div>
  <button class="btn" @click="prev()">Назад</button>
  <button class="btn primary" @click="nextOfFinish()">Вперед</button>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
👤Tolbxela

Leave a comment