I have this table with checkboxes. I use computed defined property in <th> v-model to check all the checkboxes in <td>
this is my table:
<table id="table">
<tr>
<th style="text-align: center">
<input
type="checkbox"
name="tableCheckBox"
v-model="firstSelectAll"
/>
</th>
<th style="text-align: right">#</th>
<th>Name</th>
<th>Program</th>
<th>Iteration</th>
<th>Stream</th>
<th>Group</th>
</tr>
<tr
v-for="(data, index) in firstFetchUserData"
:key="data.ind_id"
:value="data.ind_id"
style="cursor: pointer"
>
<td class="td-checkbox">
<input
type="checkbox"
v-model="selected"
:value="data"
number
/>
</td>
<td>{{ data.program_name }}</td>
<td>{{ data.iteration_name }}</td>
<td>{{ data.stream_name }}</td>
<td>{{ data.group_name }}</td>
</tr>
</table>
and this is my computed property that manages to check all of the checkboxes in <td>
firstSelectAll: {
get: function () {
return this.firstFetchUserData
? this.selected.length == this.firstFetchUserData.length
: false;
},
set: function (value) {
var selected = [];
if (value) {
this.firstFetchUserData.forEach(function (user) {
selected.push(user);
});
}
this.selected = selected;
},
},
you can see in this link Check all checkboxes vuejs, I reference my code to the highest upvote in answers. The thing is on my local it is working perfectly, but on deployment/build, it shows this error when I click the checkbox responsible for checking all the checkboxes: