mercredi 5 juillet 2023

How to pass data of the checkbox group with vue quasar?

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