CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Dev 404
Dev 404

Reputation: 1606

Bind multiple numerical textboxes in Vue.js

I have a table with multiple rows containing some information. The user is able to select as many of the rows that they would like (using checkboxes in each row), and anytime they select (or deselect) a row, I want the totalSelected to be updated.

My ViewModel currently looks like this:

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

My table looks like this:

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

So, since there are multiple rows, the issue I'm having is figuring out how to bind all of those number textboxes to one Vue variable.

Upvotes: 1

Views: 1022

Answers (2)

Bert
Bert

Reputation: 82489

You had mentioned in the question that you only wanted to sum the values that were checked. Here is a computed that calculates the quantity for only those selected.

Basically, add a Selected and a Quantity property to your batch objects and use them in a computed.

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/[email protected]/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>

Upvotes: 1

Jeff
Jeff

Reputation: 25221

You want to bind the input to a variable within the batch:

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

Then use a computed variable to sum them:

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

You may need to make sure qty is already declared on your batches in order for it to be responsive.

Upvotes: 1

Related Questions