VueJS在特定輸入集上執行數學函數

Question

目前，我有一個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 = document.querySelectorAll(".input"); 
 
     var bags = document.getElementById("bags"); 
 
     var volume = document.getElementById("volume"); 
 
     bags.value = volume.value/25; 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <button 
 
     v-model="index" 
 
     v-on:click="addProduct" 
 
     placeholder="Add Product">Add Product</button> 
 

 
    <div class="products"> 
 
    <div 
 
     is="product" 
 
     v-for="(product, index) in products" 
 
     :id="index" 
 
     :key="product" 
 
     @remove="products.splice(index, 1)" 
 
     @calculatevolume="calculatevolume" 
 
     @calculatebags="calculatebags"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

有了Vue公司，你一般不希望或需要自己被操縱DOM以任何方式。

爲此，我將bags和volume的計算轉移到您的組件中。使用v-model，它們將始終反映數據中的值。另外，我向觀察者添加了他們的值，所以當他們改變時你可以改變相反的數字。

Vue.component('product', { 
    template: ` 
    <div> 
     <select> 
     <option>Product One</option> 
     <option>Product Two</option> 
     </select> 
     <input class="input" id="bags" v-model="bags" type="number" placeholder="Bags"> 
     <input class="input" id="volume" v-model="volume" type="number" placeholder="Volume"> 
     <button @click="$emit('remove')">Delete</button> 
    </div> 
    `, 
    data(){ 
    return { 
     bags: null, 
     volume: null 
    } 
    }, 
    watch:{ 
    bags(newVal){ 
     this.volume = newVal * 25 
    }, 
    volume(newVal){ 
     this.bags = newVal/25 
    } 
    } 
}) 

new Vue({ 
    el: '#app', 
    data: { 
    products: [] 
    }, 
    methods: { 
    addProduct: function() { 
     this.products.push(this.index); 
    }, 
    } 
}) 

而且新的模板

<div id="app"> 
    <button 
     v-on:click="addProduct" 
     placeholder="Add Product">Add Product</button> 

    <div class="products"> 
    <div 
     is="product" 
     v-for="(product, index) in products" 
     :id="index" 
     :key="product" 
     @remove="products.splice(index, 1)" 
     > 
    </div> 
    </div> 
</div> 

Example。