Vue.jsに複数の数値のテキストボックスをバインドする

Question

私はいくつかの情報を含む複数の行を持つテーブルを持っています。ユーザーは、（各行のチェックボックスを使用して）好きな行をいくつでも選択することができます。行を選択（または選択解除）するたびに、totalSelectedを更新します。

私のViewModelは現在、次のようになります。

var viewModel = new Vue({ 
    el: "#OrderPickContainer", 
    data: { 
     ProductTitle: "", 
     Batches: [], 
     totalSelected: 0 
    }, 
    methods: { 
     // I have some unrelated methods here 
    } 
}); 

私のテーブルには、次のようになります。複数の行があるので、私がいる問題は、どのように把握され、

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Select</th> 
      <th>Batch Number</th> 
      <th>Available</th> 
      <th>Quantity</th> 
     </tr> 
    </thead> 
    <tbody> 
     <template v-for="batch in Batches"> 
      <tr> 
       <td><input type="checkbox" /></td> 
       <td>{{ batch.BatchNumber }}</td> 
       <td>{{ batch.AvailableQuantity }}</td> 
       // This is the input that I would like to bind to update `totalSelected`. The issue though is there are multiple rows with this exact input and I want them all to be able to add or subtract to the total. 
       <td><input type="number" min="0" class="form-control" /></td> 
      </tr> 
     </template> 
     <tr> 
      <td></td> 
      <td></td> 
      <td><strong>Total:</strong></td> 
      <td><strong>{{ totalSelected }}</strong></td> 
     </tr> 
    </tbody> 
</table> 

ので、それらの番号のテキストボックスのすべてを1つのVue変数にバインドします。

Answer 1

質問には、チェックされた値を合計したかっただけです。ここでは、選択されたものだけの数量を計算する計算があります。

基本的には、SelectedとQuantityのプロパティをバッチオブジェクトに追加し、計算された値に使用します。

console.clear() 
 

 

 
var viewModel = new Vue({ 
 
    el: "#OrderPickContainer", 
 
    data: { 
 
     ProductTitle: "", 
 
     Batches: [ 
 
      { 
 
      Selected: false, 
 
      BatchNumber: 1, 
 
      AvailableQuantity: 10, 
 
      Quantity: 0 
 
      }, 
 
      { 
 
      Selected: false, 
 
      BatchNumber: 1, 
 
      AvailableQuantity: 10, 
 
      Quantity: 0 
 
      } 
 
     ], 
 
    }, 
 
    computed:{ 
 
    totalSelected(){ 
 
     return this.Batches 
 
     .reduce((acc, v) => { 
 
      if (v.Selected) acc = acc + v.Quantity 
 
      return acc 
 
     }, 0) 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="OrderPickContainer"> 
 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Select</th> 
 
      <th>Batch Number</th> 
 
      <th>Available</th> 
 
      <th>Quantity</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <template v-for="batch in Batches"> 
 
      <tr> 
 
       <td><input type="checkbox" v-model="batch.Selected" /></td> 
 
       <td>{{ batch.BatchNumber }}</td> 
 
       <td>{{ batch.AvailableQuantity }}</td> 
 
       
 
       <td><input type="number" min="0" class="form-control" v-model.number="batch.Quantity" /></td> 
 
      </tr> 
 
     </template> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td><strong>Total:</strong></td> 
 
      <td><strong>{{ totalSelected }}</strong></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</div>

Answer 2

あなたはbatch内の変数への入力をバインドしたい：

<input type="number" min="0" class="form-control" v-model="batch.qty"/> 

そして、それらを合計する計算された変数を使用します。

computed: { 
    totalQty:() => { 
     return this.Batches.reduce((sum, batch)=>{ 
      return sum + batch.qty; 
     }, 0); 
    } 
} 

あなたは確かqtyがすでに宣言されていることを確認する必要があるかもしれませんそれが反応するように、バッチに