如何在 Vuejs 或 vanila javascript 中单击按钮时获取输入字段值？

Question

您能否告诉我如何在单击按钮时获取输入字段值。我想获得 input tag 按钮单击的值，这是 Button Tag 分隔的。

下面是我的代码：

<div class="details-filter-row details-row-size">
    <label for="Qty">Qty:</label>
    <div class="product-details-quantity">
        <input type="number" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required>
    </div>
</div>
<div class="product-details-action">
    <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

下面是我的脚本：

<script>
export default{
  data: function () {
    return {
    }
  },
  methods: {
    addTo_Cart(e) {
      // console.log(JSON.stringify(e.target.value));
    },
}
};
</script>

Answer 1

首选方法

对于使用 Vuejs 内置工具，您可以简单地将 v-model 分配给您的输入元素，然后通过该 v-model 访问其值。

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" v-model="inputValue" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
        inputValue: null
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(this.inputValue);
      },
    }
  };
</script>

其他可能的方法

但无论如何，如果您不想使用上述方法，您可以简单地使用ref （另一个 Vuejs 内置工具） 获取输入值，它提供虚拟 DOM 或 getElementById 中的元素，不推荐使用，因为它将使用实际 DOM。

• 使用ref

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" ref="inputValue" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(this.$refs.inputValue);
      },
    }
  };
</script>

• 使用getElementById

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(document.getElementById('Qty').value);
      },
    }
  };
</script>

Answer 2

您可以按如下方式使用表单输入绑定：

<div class="details-filter-row details-row-size">
    <label for="Qty">Qty:</label>
    <div class="product-details-quantity">
        <input type="number" v-model="quantity" id="Qty" class="form-control" min="1" max="10" step="1" data-decimals="0" required>
    </div>
</div>

现在在视图组件的数据部分添加数量属性。

<script>
export default{
  data: function () {
    return {
      quantity: 0
    }
  },
  methods: {
    addTo_Cart(e) {
      console.log(this.quantity);
    },
}
};
</script>

您现在可以在按钮单击处理程序中以this.quantity 的身份访问quantity。

Answer 3

您不需要为此获取事件。只需将 v-model 与您的输入元素一起使用，如下所示：

<input v-model="myNumberValue" type="number" id="Qty" class="form-control" value="1" 
      min="1" max="10" 
       step="1" data-decimals="0" required>
<script>
  export default{
   data: function () {
    return {
      myNumberValue: 1
    };
   },
   methods: {
    addTo_Cart() {
     // the input value will be accessible using this.myNumberValue
    },
   }
  };
</script>

现在，每次使用 input 更改值时，输入元素的值都会存储在 myNumberValue 属性中。