In the checkbox group I'm itterating through an array, but when I reform the array to the array of objects with label prop, value prop, hence passing it in the template the code doesn't run. Having the error - v-html will override element children. It comes because of the v-html="opt" in the template. I'm expecting to render the text of the stringOptions array.
<q-select
hide-bottom-space
options-dense
hide-dropdown-icon
input-debounce="500"
@filter="filterFn"
style="width: 200px"
counter
hint="Selected items"
use-input
dense
hide-selected
clearable
filled
v-model="model"
:options="filterOptions"
label="Actors"
multiple
>
<template
v-slot:option="{ itemProps, opt, selected, toggleOption }"
>
<q-item v-bind="itemProps">
<q-item-section>
<q-item-label v-html="opt"></q-item-label> // error here
</q-item-section>
<q-item-section side>
<q-checkbox
:model-value="selected"
@update:model-value="toggleOption(opt)"
></q-checkbox>
</q-item-section>
</q-item>
</template>
</q-select>
<script>
export default {
stringOptions: [
'All',
'Alfa',
'Omega',
'Lampda',
// { label: 'All', value: 'all' },
// { label: 'Alfa', value: 'alfa' },
// { label: 'Omega', value: 'omega' },
// { label: 'Lampda', value: 'lampda' }
],
}
</script>
Aucun commentaire:
Enregistrer un commentaire