Using checkbox array with objects and mark selected

alhidalgodev

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

beets

@alhidalgodev The tricky thing, is that the objects in selection are not equal to the objects in options. 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

beets

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

alhidalgodev

@beets Thanks a lot!!! you are my hero!