how to implement q-checkbox like Vue?



  • This works fine for me:

    <li v-for="friend, index in flist">{{ friend.nickname }} <input type="checkbox" :id="friend.id" :value="friend.id" v-model="flistShare"></li>
    

    flistShare is an empty array defined in my data btw. But I can’t get the same to work using q-checkbox. Every item in the loop gets checked or I get errors complaining about expecting a boolean, etc.

    How can this work with q-checkbox? I just want to submit a form where the checkbox values are the ids from my loop.



  • This does NOT work btw (but shouldn’t it?):

    <li v-for="friend, index in flist">{{ friend.nickname }} <q-checkbox val="friend.id" v-model="flistShare" /></li>
    


  • I got it working with 2 modifications. Apparently I couldn’t use my base li element as the v-for, and I needed to set val as a prop:

    <div v-for="friend, index in flist">
    <li>{{ friend.nickname }} <q-checkbox :val="friend.id" v-model="flistShare" /></li>
    </div>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.