How to check checkbox's value ( true/false ), change value and add to array using v-model
-
I am a getting started with Vue and am currently working with Quasar, creating an attendance table, where I would like to achieve the following, but i am stuck:
a function which would, if a checkbox was clicked or not, add a value to an array.
Like this:
if true - change to false - check if it exists in array - if it does remove it
if false - change to true - add to an arrayExplanation: When I click in “Prisotnost” a people who are attending, i would like those values to be stored so that I can later output the values in drop down menu and select specific attendee.
Thank you for your replies and help.
<template> <q-layout> <q-page-container> <q-page> <div align="center"> <h2>Tracker v0.1</h2> </div> <br> <template> <div class="q-pa-md"> <q-table :data="data" :columns="columns" :pagination.sync="pagination" row-key="name" > <template #body="props"> <q-tr> <q-td v-for="(colObj, colNaziv) in props.colsMap" :key="colNaziv"> <span v-if="colNaziv === 'name'">{{ props.row[colNaziv] }}</span> <q-checkbox v-model="props.row[colNaziv]" @input="toggleCheckboxes(props.row)" v-else-if="colNaziv === 'prisotnost'" :value ="props.row[colNaziv]" dense> </q-checkbox> <q-checkbox v-model="props.row[colNaziv]" @input="toggleCheckboxes(props.row)" v-else-if="colNaziv === 'placilo'" :value ="props.row[colNaziv]" dense> </q-checkbox> <q-checkbox v-else :value ="props.row[colNaziv]"></q-checkbox> </q-td> </q-tr> </template> </q-table> </div> </template> </q-page> </q-page-container> </q-layout> </template> <script> export default { name: 'PageIndex', data () return { val: true, selected: [], pagination: { rowsPerPage: 0 }, columns: [ { name: 'name', required: true, label: 'Ime', align: 'left', field: row => row.name, format: val => `${val}`, sortable: false, classes: 'bg-grey-2 ellipsis', style: 'max-width: 100px', headerClasses: 'bg-primary text-white' }, { name: 'prisotnost', align: 'center', label: 'Prisotnost', field: 'prisotnost', sortable: false, headerClasses: 'bg-primary text-white', selection:"multiple", }, { name: 'placilo', align: 'center', label: 'Plačilo', field: 'placilo', sortable: false, headerClasses: 'bg-primary text-white' } ], data: [ { name: 'Jan', prisotnost: false, placilo: false, kolicina: 20 }, { name: 'Tina', prisotnost: false, placilo: false, kolicina: 10 }, { name: 'Goran', prisotnost: false, placilo: false, kolicina: 20 }, ] } }, methods: { toggleCheckboxes(value) { // this is empty for now }, mounted() {} } }; </script> <!-- Style --> <style lang="sass"> </style>
-
Try putting your code in a codepen along with your attempt at what you are trying to accomplish.
Scott