How to limit increment in button?

Question

I want the 'step' value to be no more than 3, what can help me?

this my code

     <label>{{step}}</label>
     <button class="btn btn-red btn-next" @click="step < 3;step++; " v-html="step === 3 ? 'Kirim' : 
     'Selanjutnya'">
    </button>

Answer 1

I'd suggest another approach, that in my opinion is a "cleaner" one:

<template>
  <div>
    <label>{{ step }}</label>
    <button @click="increment" :disabled="shouldStopIncrement">{{ stepLabel }</button>
  </div>
</template>

<script>
export default {
  name: 'SampleComponent',
  data() { 
    return { 
      step: 0 
    } 
  },
  computed: {
    stepLabel({ step }) {
      return step === 3 ? 'Kirim' : 'Selanjutnya';
    },
    shouldStopIncrement({ step }) {
      return step >= 3;
    }
  },
  methods: {
    increment() {
      this.step++;
    }
  }
}
</script>

Answer 2

This can help for sure:

<label>{{step}}</label>
<button class="btn btn-red btn-next" @click="increment"
         v-html="step === 3 ? 
         'Kirim' : 'Selanjutnya'">
</button>

increment() {
 if (this.step < 3) this.step++;
}