时间戳

首页 > 解决方案 > Vue JS中数量为零时无法禁用按钮

javascript - Vue JS中数量为零时无法禁用按钮

问题描述

我正在尝试使用 vue 来增加和减少数量选择器组件上的输入值，唯一的问题是当值为零或更低时我想禁用减号按钮，下面是我到目前为止创建的 HTML 和 JS， alert 和 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();
      }

任何帮助都会很棒-谢谢

标签： javascriptvue.jsshopify

解决方案

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 的美妙之处。它是反应性的。

推荐阅读