Блог

Я пытаюсь использовать vue для увеличения и уменьшения входных значений в компоненте выбора количества, единственная проблема заключается в том, что когда значение равно нулю или ниже, я хочу отключить кнопку минус, ниже приведены HTML и JS, которые я создал до сих пор, оповещение и функция updateButtonDisabled () не работают.

HTML с функциями щелчка

 <div class="input-group-prepend">
  <span id="subButton" class="input-group-text" @click="decrement()">-</span>
</div>

<input v-model="form.quantity" type="number" class="form-control" id="Quantity" value="1" min="1" {% if product.variants.size == 1 %}max="{{ product.variants.first.inventory_quantity}}"{% endif %}>

<div class="input-group-append">
  <span class="input-group-text" @click="increment()"> </span>
</div> 
 

JS и данные

     data(){
      return {
        form: {
          id: document.getElementById('variant-id').value,
          quantity: document.getElementById('Quantity').value
        }
      }
    }

      updateButtonDisabled(){
        // If quanitity less than equal zero disable the minus button
        if(this.form.quantity <= 0) {
          document.getElementById("subButton").setAttribute('disabled', 'disabled');
        }
        else {
          document.getElementById("subButton").removeAttribute('disabled');
        }
      },
      increment () {
        this.form.quantity  
        this.updateButtonDisabled();

      },
      decrement () {
        if(this.form.quantity <= 0) {
          alert('Negative quantity not allowed')
        } else {
          this.form.quantity--
        }
         this.updateButtonDisabled();
      }
 

Любая помощь была бы отличной — спасибо

A <span> не реагирует на наличие disabled атрибута.

У вас есть два варианта: используйте элемент DOM, который изначально (или в любой используемой вами среде) изменяет внешний вид при disabled наличии атрибута. Например <button> .

Или вы могли бы просто применить класс (как насчет disabled ?) К элементу и оформить его по своему усмотрению:

  span.disabled { 
   opacity: 0.5;
   pointer-events: none;
 }
 

Еще одно замечание: не манипулируйте DOM в своем компоненте подобным образом. Vue может сделать это за вас, так же просто, как:

 <button :disabled="form.quantity <= 0">
 

Или, используя класс:

 <span :class="{ disabled: form.quantity <= 0}">
 

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

Последнее замечание: больше не нужно звонить updateButtonDisabled() . В этом прелесть использования Vue. Это реактивно.