目前，我有一个 VueJS 应用程序，您可以在其中单击一个按钮来创建一组两个输入。这两个输入在按键时执行一个简单的数学函数。这些数学函数使用一组输入。但是，由于我使用 document.getElementById 来获取输入，因此它仅适用于第一组输入。有什么方法可以唯一地识别每组输入，以便我可以单独执行此数学函数？
例子：
Vue.component('product', {
template: `
<div>
<select>
<option>Product One</option>
<option>Product Two</option>
</select>
<input class="input" id="bags" @keyup="$emit('calculatevolume')" type="number" placeholder="Bags">
<input class="input" id="volume" @keyup="$emit('calculatebags')" type="number" placeholder="Volume">
<button @click="$emit('remove')">Delete</button>
</div>
`
})
new Vue({
el: '#app',
data: {
index: 0,
products: []
},
methods: {
addProduct: function() {
this.products.push(this.index);
this.index++;
},
calculatevolume: function() {
var inputs = document.querySelectorAll(".input");
var bags = document.getElementById("bags");
var volume = document.getElementById("volume");
volume.value = bags.value * 25;
},
calculatebags: function() {
var inputs = …