CODEWITHSUNDEEP
vuejs2
meez
meez

Reputation: 4788

How do I add min and max value to my Vue count value

The user can click on a + and - button to increment and decrement the value. How do I add a min and max value e.g. min = 1 and max = 10 for the <span>[[ count ]]</span>?

My Vue.js app:

<div id="app">
    <a class="btn" v-on:click="increment">Add 1</a>
    <a class="btn" v-on:click="decrement">Remove 1</a>

    <span>[[ count ]]</span>
  </div>

  <script>

    const App = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          min: 1,
          max: 10,
          count: 1
        }
      },
      methods: {
        increment() {
          this.count = this.count === this.max ? this.max : this.count + 1;
        },
        decrement() {
          this.count = this.count === this.min ? this.min : this.count + 1;
        }
      }
    })

  </script>

Update: Above code is working now.

1) How do I change my <span>[[ count ]]</span> into an <input type="number" min="0" max="10" />, controlled by this buttons?

2) How do I add a class e.g disabled when [[ count ]] === 1?

Update 2:

I changed it to an input field:

  <input type="number" name="lineItems[{{ product.id }}][quantity]" value="{{ quantity }}" v-model.number="quantity" min="{{ product.minPurchase }}" max="{{ product.calculatedMaxPurchase }}" class="custom-qty__qty-field">

And make the input value adjustable by the min and plus buttons:

<script>
    const app = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          quantity: 1,
          max: {{ product.calculatedMaxPurchase }},
          min: {{ product.minPurchase }}
        }
      },
      methods: {
        increment() {
          //this.count++
          this.quantity = this.quantity === this.max ? this.max : this.quantity + 1;
        },
        decrement() {
          //this.count--
          this.quantity = this.quantity === this.min ? this.min : this.quantity - 1;
        }
      }
    })
  </script>

E.g {{ product.minPurchase }} are twig variables which contains settings from the ShopWare backend.

Is this a clean way? And how do I add a CSS class when the count reaches 1, so I can disable the button?

Upvotes: 1

Views: 6653

Answers (1)

Dan
Dan

Reputation: 63099

Check if the count is already at the limits during increment and decrement and act accordingly.

increment() {
  this.count = this.count === 10 ? 10 : this.count + 1;
}

decrement() {
  this.count = this.count === 1 ? 1 : this.count - 1;
}

You could also make min and max data properties instead of hardcoding 1 and 10 if you wanted.

After your Edit:

If you use a number input instead, you could solve this without methods. All that's needed is to bind your data to the input like this:

<input type="number" v-model="count" :min="min" :max="max" />

See the demo below:

new Vue({
  el: "#app",
  data() {
    return {
      min: 1,
      max: 10,
      count: 1
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="number" v-model="count" :min="min" :max="max" />
  
  <span class="instructions">&lt;&lt; Mouseover the input to change</span>
  <div class="count">Count: {{ count }}</div>
</div>

Upvotes: 2

Related Questions