Javascript 在Vue JS中，当数量为零时，无法禁用按钮

我试图使用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();
      }

data（）{
返回{
表格：{
id:document.getElementById（'variant-id'）。值，
数量：document.getElementById（'quantity'）。值
}
}
}
updateButtonDisabled（）{
//如果数量小于等于零，则禁用减号按钮
如果（this.form.quantityA
对禁用
属性没有反应

您有两种选择：使用DOM元素，当存在
disabled
属性时，该元素会以本机方式（或在您使用的任何框架中）更改外观。例如

或者，您可以简单地对元素应用一个类（禁用
怎么样
？），并根据您的内心内容设置其样式：

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

还有一点需要注意：不要像那样在组件中操纵DOM。Vue可以为您这样做，非常简单：

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



或者，使用类：

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



我不会说你自己做错了，但这让我想起一个人在路上推着一辆跑车，而不是开车

最后一点注意：不再需要调用
updateButtonDisabled（）
。这就是使用Vue的好处。它是被动的。
A
不会对禁用
属性做出反应

您有两种选择：使用DOM元素，当存在
disabled
属性时，该元素会以本机方式（或在您使用的任何框架中）更改外观。例如

或者，您可以简单地对元素应用一个类（禁用
怎么样
？），并根据您的内心内容设置其样式：

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

还有一点需要注意：不要像那样在组件中操纵DOM。Vue可以为您这样做，非常简单：

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



或者，使用类：

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



我不会说你自己做错了，但这让我想起一个人在路上推着一辆跑车，而不是开车

最后一点注意：不再需要调用
updateButtonDisabled（）
。这就是使用Vue的好处。它是被动的