No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    2
    857
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jankosutnik last edited by

      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>
      
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by s.molinari

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

        Scott

        1 Reply Last reply Reply Quote 0
        • First post
          Last post