On click check all checkbox in vue js - vue.js

Question

I Need to check all dynamic checkbox with vue js anytime user will click button.
Eg: Click on and all checkbox will be selected/deselected
var Records = Vue.component('Records', {
template : `
<button v-on:click="selectAll()" class="btn btn-outline-primary">Select All</button>
<table class="table table-striped table-hover">
<template v-for="(col_name, key) in form_object_keys">
<tr>
<th scope="col"></th>
<th scope="col" v-for="(col, key) in col_name">{{ col }}</th>
</tr>
</template>
<template v-for="(ps, index) in form_object">
<tr>
<td>
<div class="form-check">
<input type="checkbox" :value="form_id" />
</div>
</td>
<td v-for="dato in ps">{{ dato }}</td>
</tr>
</template>
</table>
`,
data() {
return{
title: 'Component Title',
form_id: 10,
form_object: ['item1', 'item2', 'item3'],
form_object_keys: ['key1', 'key2', 'key3'],
selectAll(){
//
}
}
}
});
I've created "selectAll" function which will be engaged by click button

Answer 1

I would keep the selected state in the reactive data as well, and bind the checkbox with v-model: Check this
<script setup>
import { ref } from 'vue'
const form_objects = ref([
{name: "item1", selected: false},
{name: "item2", selected: false},
{name: "item3", selected: true},
{name: "item4", selected: false},
]);
const selectAll = () => {
form_objects.value.forEach((item) => {item.selected = true})
}
</script>
<template>
<button v-on:click="selectAll()">Select All</button>
<div v-for="item in form_objects">
{{item.name}}
<input type="checkbox" v-model="item.selected" />
</div>
</template>