使用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模型時，我們必須確保分配的模型在每次迭代中都不同。 否則，所有輸入將綁定到完全相同的模型實例。 我們可以通過使用存儲所有模型並通過循環中可用的鍵訪問模型的對象來實現這一點。 這是一些代碼（根據您的代碼段）：

 <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 。 請記住，如果您通過道具或其他方式動態獲取餐點，則可能無法正常工作。 如果必須這樣做，請考慮使用監視功能，而不要使用我在代碼段中使用的計算屬性。

有關Vue更改檢測的更多信息以及有關計算屬性與觀察程序的這一部分，請參閱文檔的這一部分 。

編輯：如果您不使用像Babel這樣的轉譯器，則可能必須用上面的代碼段中的var和loop替換所有let ，如下所示：

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

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