Vue.js及原生JavaScript中点击按钮获取输入框值的方法

没问题！我来给你详细说说怎么在Vue.js和原生JavaScript里实现点击按钮获取独立输入框值的需求，两种方案都很直观：

Vue.js里最推荐的是用响应式绑定来处理，这样不用直接操作DOM，更符合Vue的设计思路：

方法1：使用 v-model 双向绑定 #

你只需要给输入框加上v-model，把它和data里的变量绑定起来，之后在点击方法里直接调用这个变量就行：

修改你的HTML部分：

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <!-- 加上v-model绑定到data里的qty变量 -->
    <input type="number" id="Qty" class="form-control" v-model="qty" 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 {
      qty: 1 // 初始化和输入框默认值一致
    }
  },
  methods: {
    addTo_Cart(e) {
      // 直接获取绑定的qty值
      console.log('当前数量：', this.qty);
      // 你还能拿到按钮的value，也就是商品ID
      console.log('商品ID：', e.target.value);
    }
  }
};
</script>

方法2：直接通过DOM或$refs获取（适合不想用双向绑定的场景） #

如果你不想用v-model，也可以直接获取输入框的DOM元素来取值：

methods: {
  addTo_Cart(e) {
    // 方法A：通过ID获取
    const qtyValue = document.getElementById('Qty').value;
    // 方法B：用Vue的$refs（需要给输入框加ref属性）
    // 先给输入框加ref="qtyInput"，然后：
    // const qtyValue = this.$refs.qtyInput.value;
    console.log('当前数量：', qtyValue);
  }
}

如果不用Vue，纯原生JS的话，直接在点击事件里查询DOM元素就行：

修改你的按钮，加上原生的onclick事件：

<div class="product-details-action">
  <button value="{{$ProductById->id}}" onclick="addTo_Cart(this)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

然后写对应的原生JS函数：

<script>
function addTo_Cart(button) {
  // 获取输入框的值
  const qtyValue = document.getElementById('Qty').value;
  // 获取按钮的商品ID
  const productId = button.value;
  console.log('商品ID：', productId, '数量：', qtyValue);
}
</script>

这样不管是Vue还是原生JS，都能轻松拿到输入框的值啦～

内容的提问来源于stack exchange，提问作者Haron