CODEWITHSUNDEEP
vue.jsvuejs3quasar-framework
JK2018
JK2018

Reputation: 489

Quasar multi select menu with checkboxes

I am trying to make a multi select menu , while each option is a checkbox. The menu is also filterable. Here is a working codepen example given by @Houssem : https://codepen.io/HoussemDbira/pen/zYEgVmb

The problem is using v-model inside scoped v-slot. As seen on the pic below, my text editor targets the problem comming from v-model="selected". And when highlighted it gives me this hint : "'v-model' directives cannot update the iteration variable 'selected' itself." When I run my app, the browser also gives an error : "VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable."

enter image description here

<div id="q-app">
  <div class="q-pa-md" style="max-width: 250px">
    <div class="q-gutter-md">
      <q-badge color="secondary" multi-line>
        Model: "{{ actorModel }}"
      </q-badge>

      <q-select
                hide-bottom-space
                options-dense
                hide-dropdown-icon
                input-debounce="500"
                @filter="filterFn"
                style="width: 250px"
                counter
                hint="Selected items"
                use-input
                dense
                hide-selected
                clearable
          filled
          v-model="actorModel"
          :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>
            </q-item-section>
            <q-item-section side>
              <q-checkbox  v-model="selected" @update:model-value="toggleOption(opt)"></q-checkbox>
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
  </div>
</div>

<script >
import {ref} from 'vue'
export default {
setup(){

    const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle']
    const filterOptions = ref(stringOptions)
    const actorModel = ref([])

    const filterFn = (val, update) => {
        update(() => {
          if (val === '') {
            filterOptions.value = stringOptions
          }
          else {
            const needle = val.toLowerCase()
            filterOptions.value = stringOptions.filter(
              v => v.toLowerCase().indexOf(needle) > -1
            )
          }
        })
      }

return {filterFn, actorModel, filterOptions, stringOptions}
}
}
</script>

Upvotes: 1

Views: 7091

Answers (1)

Houssem
Houssem

Reputation: 1072

the stringOptions property is not declared to be used in the setup code, it's only declared to be returned to the view, so you need to add this line in the beggining of your setup method : const stringOptions=[ 'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle' ] and in the return refrence directly the property stringOptions

here is a link to a working codepen example https://codepen.io/HoussemDbira/pen/zYEgVmb

Upvotes: 5

Related Questions