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


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

    Scott


Log in to reply