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

您能告诉我如何在点击按钮时获取输入字段值吗。我想在按钮点击上获得输入标签值，按钮标签是分开的

下面是我的代码：

<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>

导出默认值{
数据：函数（）{
返回{
}
},
方法：{
添加到购物车（e）{
//log（JSON.stringify（e.target.value））；
},
}
};

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

<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>

数量：

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

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

导出默认值{
数据：函数（）{
返回{
数量：0
}
},
方法：{
添加到购物车（e）{
console.log（这个数量）；
},
}
};

---

现在，您可以访问按钮单击处理程序中的

quantity

，如下所示。quantity

您可以使用表单输入绑定：

<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>

数量：

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

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

导出默认值{
数据：函数（）{
返回{
数量：0
}
},
方法：{
添加到购物车（e）{
console.log（这个数量）；
},
}
};

现在，您可以在按钮单击处理程序中访问

quantity

，作为

this.quantity

首选方法 要使用Vuejs内置工具，您只需为输入元素指定一个值，然后通过该

v-model

访问其值

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
inputValue:空
}
},
方法：{
添加到购物车（e）{
console.log（this.inputValue）；
},
}
};

其他可能的办法 但在任何情况下，如果不想使用上述方法，只需使用（另一个Vuejs内置工具）获取输入值，该工具在虚拟DOM中提供元素，或者不推荐使用，因为它将使用实际DOM

• 使用

  ref

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
}
},
方法：{
添加到购物车（e）{
console.log（此.$refs.inputValue）；
},
}
};

• 使用

  getElementById

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
}
},
方法：{
添加到购物车（e）{
console.log（document.getElementById（'Qty'）.value）；
},
}
};

首选方法 要使用Vuejs内置工具，您只需为输入元素指定一个值，然后通过该

v-model

访问其值

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
inputValue:空
}
},
方法：{
添加到购物车（e）{
console.log（this.inputValue）；
},
}
};

其他可能的办法 但在任何情况下，如果不想使用上述方法，只需使用（另一个Vuejs内置工具）获取输入值，该工具在虚拟DOM中提供元素，或者不推荐使用，因为它将使用实际DOM

• 使用

  ref

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
}
},
方法：{
添加到购物车（e）{
console.log（此.$refs.inputValue）；
},
}
};

• 使用

  getElementById

数量：
添加到购物车
导出默认值{
数据：函数（）{
返回{
}
},
方法：{
添加到购物车（e）{
console.log（document.getElementById（'Qty'）.value）；
},
}
};

您不需要为此获取事件。只需将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>

导出默认值{
数据：函数（）{
返回{
myNumberValue:1
};
},
方法：{
addTo_Cart（）{
//可以使用this.myNumberValue访问输入值
},
}
};

---

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

您不需要为此获取事件。只需将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>

导出默认值{
数据：函数（）{
返回{
myNumberValue:1
};
},
方法：{
addTo_Cart（）{
//可以使用this.myNumberValue访问输入值
},
}
};

---

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

在普通JS中，您可以像-

document.getElementById（'Qty'）一样读取它。在普通JS中，值可以像-
document.getElementById（'Qty'）。值
实际上我需要下面的脚本：
addTo\u（e） {this.$store.dispatch（“quantityInDe”，{id:Number（e.target.id），QTY:Number（this.inputValue）}）
}，实际上我需要下面的脚本：
addTo_Cart（e）{this.$store.dispatch（“quantityInDe”，{id:Number（e.target.id），QTY:Number（this.inputValue）}）；
}，