vue.js - 如何限制按钮的增量？

Question

我希望“step”值不超过3，有什么可以帮助我吗？

这是我的代码

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

Answer 1

我建议另一种方法，在我看来这是一种“更干净”的方法:

<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>