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时，我们必须确保为每次迭代分配的模型都不同。否则，所有输入都将绑定到完全相同的模型实例。我们可以通过使用一个存储所有模型的对象来实现这一点，并通过循环中可用的密钥访问它们。这是一些代码（基于您的代码段）：

＆＃13;

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

＆＃13;

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

有关Vue和this part of the documentation有关计算属性与观察者的更改检测的详细信息，请参阅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将多个数字输入相加

1 个答案: