binding model to QSelect with checkbox



  • im wanna to bind model to QSelect with checkbox,
    but when binding model to QSelect checkbox not checked.
    this is my code:

     data() {
        return {
            selectModel: [],
            selectOptions: [
            {
              label: 'Google',
              value: 1
            },
            {
              label: 'Facebook',
              value: 2
            },
            {
              label: 'Twitter',
              value: 3
            },
            {
              label: 'Apple',
              value: 4
            },
            {
              label: 'Oracle',
              value: 5
            }
          ],
         
        };
      },
    
    

    and button event to binding QSelect

        onBindCheckedSelect() {
    this.selectModel= [
     {
              label: 'Twitter',
              value: 3
            },
            {
              label: 'Apple',
              value: 4,
              
            },
    
        ]},
    

    and this is my html code

     <div class="q-pa-md" style="max-width: 300px">
        <div class="q-gutter-md">
          <q-badge color="secondary" multi-line>
            Model: "{{ model }}"
          </q-badge>
    
          <q-select
              filled
              v-model="selectModel"
              :options="selectOptions"
              label="Multi with toggle"
              multiple
              emit-value
              map-options
          >
            <template v-slot:option="scope">
              <q-item
                v-bind="scope.itemProps"
                v-on="scope.itemEvents"
              >
                <q-item-section>
                  <q-item-label v-html="scope.opt.label" ></q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-checkbox v-model="selectModel" :val="scope.opt.value" />
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </div>
    

    but its not working and selected item not checked

    qselect-bug.png



  • @mfrz6

    Please create a codepen( very simple to do by extending a Quasar Doc example) to demo your problem so the people here can help you better.

    btw: I don’t think it’s a good idea to use both v-model and :val on the same component

    <q-checkbox v-model="selectModel" :val="scope.opt.value" />


Log in to reply