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

VueJS对特定的输入集执行数学函数

1 个答案: