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
-
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" />