在Vue.js中綁定多個數字文本框

Question

我有一個包含一些信息的多行的表。用戶可以選擇他們想要的行數（使用每行中的複選框），並且在他們選擇（或取消選擇）行時，我希望totalSelected被更新。

我的視圖模型目前看起來是這樣的：

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> 

所以，因爲有多個行，我遇到的問題是搞清楚如何將所有這些數字文本框綁定到一個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已聲明在你的批次上，以便它有響應。