How to check checkbox's value ( true/false ), change value and add to array using v-model

jankosutnik

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 array

Explanation: 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>

s.molinari

Try putting your code in a codepen along with your attempt at what you are trying to accomplish.

Scott