Vue.jsを使用して複数の数値入力をまとめて

Question

これまで数多くの入力を追加しようとしていますが、私は2つの結果に達しました。

最初に入力を使用すると、計算結果は入力されたすべての桁を加算します。

第2に、v-モデルを使用して、配列に入れるチェックボックスを使用するが、すべてのボックスが互いにマッチングするようにする。

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

トリッキーな部分は、私たちのモデルを保存する必要があるオブジェクトは、すべてのキーで事前に初期化されなければならないことです。そうでない場合、計算されたプロパティcreditsSumは更新されません。 食べ物やその他の手段を使って食べ物を動的に食べるなら、これはうまくいかないかもしれません。それを行う必要がある場合は、スニペットで使用した計算されたプロパティの代わりにウォッチ関数を使用することを検討してください。

Vueおよびthis partの計算されたプロパティとウォッチャーの変更検出の詳細については、this part of the documentationを参照してください。

編集： 場合は、あなたが、あなたは上記のスニペットに次のようにvarを持つすべてのletとループを交換する必要がある場合がありますBabelようtranspilerを使用していない：私は何を」正確にわからない

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

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