使用 Vue.js 将多个数字输入相加

Question

我希望将多个输入加在一起，到目前为止我已经得到了两个结果。

首先使用输入计算结果将输入的每个数字加在一起。

其次使用 v-model 就像将复选框放入数组中一样，但所有的框最终都相互匹配。

那里的一小段代码如下：

<template>
                <div class="panel panel-default">
                    <div class="panel-heading">{{credits}}</div>
                      <div v-for="meal in title">
                        <input v-bind:id="meal" v-model.number="used_credits" type="number">{{used_credits}}
                    <div class="panel-body">

                    </div>
                </div>

</template>

谢谢

Answer 1

好吧，这有点棘手。在模板循环中使用 v-model 时，我们必须确保每次迭代分配的模型都不同。否则所有输入都将绑定到完全相同的模型实例。我们可以通过使用一个对象来实现这一点，该对象存储所有模型并通过循环中可用的键访问这些模型。这是一些代码（基于您的代码段）：

<template>
  <div>
    <div>{{ credits }}</div>
    <div v-for="meal in meals">
      <input :id="meal" v-model.number="creditsPerMeal[meal]" type="number">
    </div>
    <div>
      Credits used: {{creditsSum}}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'test-component',
    data: function () {
      let meals = [
        'pizza', 'pasta', 'salad'
      ]

      let creditsPerMeal = {}
      for (let meal of meals) {
        creditsPerMeal[meal] = 0
      }

      return {
        credits: 10,
        meals,
        creditsPerMeal
      }
    },
    computed: {
      creditsSum () {
        return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
      }
    }
  }
</script>

棘手的部分是应该存储我们模型的对象必须是 pre-initialized 和所有键。如果不是这种情况，计算的属性 creditsSum 将不会更新。请记住，如果您通过道具或其他方式动态获取餐点，这可能不起作用。如果您必须这样做，请考虑使用监视函数而不是我在代码段中使用的计算属性。

请参阅 this part of the documentation for more information about the change detection of Vue and this part 关于计算属性与观察者的信息。

编辑：如果您没有使用 Babel 之类的转译器，您可能必须将所有 let 替换为 var 和上面代码段中的循环：

  var meals = [
    'pizza', 'pasta', 'salad'
  ]

  var creditsPerMeal = {}
  for (var i = 0; i < meals.length; i++) {
    creditsPerMeal[meals[i]] = 0
  }

使用 Vue.js 将多个数字输入相加

Adding together multiple number inputs using Vue.js

javascript

input

vue.js

vuejs2