button prev and next in stepper vue

Question

I want to make buttons previously and next, but I a little not understand how its realized, because starting learning vue recently

I have methods which I should write this.activeindex < this.activeindex -1 and etc how I can make it?

const App = {
  data() {
    return {
      
      activeIndex: 0, 
      steps: [
       
      ]
    }
  },
  methods: {
    prev() {
      
    },
    reset() {
  
    },
    nextOfFinish() {
      
    },
    setActive(idx) {
      
    }
  },
  computed: {
   
  }
}

Vue.createApp(App).mount('#app')

in html I have this code

<div class="steps-content">
                
              </div>

              <ul class="steps-list">
                <li class="steps-item active"><span>1</span> Шаг 1</li>
                <li class="steps-item"><span>2</span> Шаг 2</li>
                <li class="steps-item"><span>3</span> Шаг 3</li>
                <li class="steps-item"><span>4</span> Шаг 4</li>
              </ul>
              <div>
                
                <button class="btn">Назад</button>
                <button class="btn primary">Вперед</button>
              </div>

Answer 1

Please start with Vue Basics

• Quick Start
• Creating a Vue Application
• Reactivity Fundamentals
• Computed Properties
• Form Input Bindings

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>