Как добавить минимальное и максимальное значение к моему счету Vue

Question

Пользователь может нажать на кнопку + и -, чтобы увеличить или уменьшить значение. Как добавить минимальное и максимальное значение, например, min = 1 и max = 10 для приложения <span>[[ count ]]</span>?

My Vue.js:

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

Обновление: Над кодом работает сейчас.

1) Как мне изменить <span>[[ count ]]</span> на <input type="number" min="0" max="10" />, управляемый этими кнопками?

2) Как добавить класс, например disabled, когда [[count]] === 1?

Обновление 2:

Я изменил его в поле ввода:

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

И настройте входное значение кнопками min и plus:

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

Например {{ product.minPurchase }} являются twig переменными, которые содержат настройки из Бэкэнд ShopWare.

Это чистый способ? И как мне добавить CSS класс, когда счет достигает 1, чтобы я мог отключить кнопку?

Answer 1

Проверьте, находится ли count уже на границах во время increment и decrement и действуйте соответствующим образом.

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

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

Вы также можете сделать данные min и max свойства вместо жесткого кодирования 1 и 10, если хотите.

После редактирования:

Если вместо этого вы используете числовой ввод, вы можете решить это без методов. Все, что нужно, это привязать ваши данные к входным данным следующим образом:

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

См. Демонстрацию ниже:

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>