VueJSは特定の入力セットで数学関数を実行します

Question

現在、私はボタンをクリックして2つの入力のセットを作成できるVueJSアプリケーションを持っています。これらの2つの入力は、キーアップ時に簡単な数学関数を実行します。これらの数学関数は、1組の入力で機能します。しかし、私はdocument.getElementByIdを使用して入力を取得しているので、入力の最初のセットでのみ機能します。この数学関数を個別に実行できるように、各入力セットを一意に識別できる方法はありますか？

例：Vueので

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

、あなたは一般的にしたいか、どのような方法で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。