javascript - 使用 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 时，我们必须确保每次迭代分配的模型都是不同的。否则，所有输入都将绑定(bind)到完全相同的模型实例。我们可以通过使用存储所有模型的对象并通过循环中可用的键访问这些模型来实现此目的。这是一些代码(基于您的代码片段):

<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>

棘手的部分是存储模型的对象必须使用所有键进行预初始化。如果不是这种情况，计算属性 creditsSum 将不会更新。请记住，如果您通过 Prop 或其他方式动态获取食物，这可能不起作用。如果您必须这样做，请考虑使用监视函数而不是我在代码片段中使用的计算属性。

参见this part of the documentation有关 Vue 变更检测的更多信息和 this part关于计算属性与观察者。

编辑:如果您没有使用像 Babel 这样的转换器您可能必须将所有 let 替换为 var 以及上面代码片段中的循环:

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

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