On click check all checkbox in 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>