One of the tasks I'm working on involves managing a table filled with rows of information. Users can choose multiple rows by checking checkboxes in each row, and I need to keep track of how many rows are selected by updating the totalSelected value.
Currently, my ViewModel is configured as follows:
var viewModel = new Vue({
el: "#OrderPickContainer",
data: {
ProductTitle: "",
Batches: [],
totalSelected: 0
},
methods: {
// Other methods are located here
}
});
The structure of my table is 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>
// Within each row, there is an input field that should update `totalSelected`. The challenge lies in binding these inputs together to reflect changes collectively.
<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>
The struggle I am facing revolves around finding a way to connect all the number textboxes in different rows to a single Vue variable for tracking overall selection count.