Using checkbox array with objects and mark selected
-
I have an array of objects and I would like to mark the checkboxes that are already inside my array "selected:
Example code;
data () { return { selection: [ {name: 'teal'}, {name: 'red'} ] } }
<div id="q-app"> <div class="q-pa-md"> <div class="q-gutter-sm"> <q-checkbox v-for="(option, index) in options" v-model="selection" :val="option" :label="option.label" :color="option.label"></q-checkbox> </div> <div class="q-px-sm"> The model data: <strong>{{ selection }}</strong> </div> </div> </div>
What am I waiting for?
What’s going on ?
Example: https://codepen.io/itsalb3rt/pen/oNYZNrZ?editors=101
-
@alhidalgodev The tricky thing, is that the objects in
selection
are not equal to the objects inoptions
. They need to pass an equality test (i.e.==
) in order to be considered selected. This will depend on how you want to define the pre-selected options, if it’s hardcoded or from vuex / api. See this example for the most basic idea:
https://codepen.io/pianopronto/pen/wvoJqLV?editors=1010 -
Another option, where we store selected right in the options object, and optionally use a computed variable to turn it back to what you want: https://codepen.io/pianopronto/pen/XWNMeWg?editors=101
-
@beets Thanks a lot!!! you are my hero!