8

I need my q-select to select the "name" depending on the previously assigned "id". Currently the input shows me the "id" in number and not the name to which it belongs.

 <q-select
  class="text-uppercase"
  v-model="model"
  outlined
  dense
  use-input
  input-debounce="0"
  label="Marcas"
  :options="options"
  option-label="name"
  option-value="id"
  emit-value
  map-options
  @filter="filterFn"
  @update:model-value="test()"
>
  <template v-slot:no-option>
    <q-item>
      <q-item-section class="text-grey"> No results </q-item-section>
    </q-item>
  </template>
</q-select>

Example I would like the name that has the id: 12 to be shown loaded in the q-select.

const model = ref(12);
const options = ref([]);

const filterFn = (val, update) => {
  if (val === "") {
    update(() => {
      options.value = tableData.value;
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    options.value = tableData.value.filter((v) =>
      v.name.toLowerCase().includes(needle)
    );
  });
};
Nc92
  • 93
  • 1
  • 4

1 Answers1

1

I'm running into the same issue and couldn't find a proper way to set default value of object type.

I ended up use find() to look for the default value in the options and assign it on page created event.

created() {
    this.model = this.options.find(
        (o) => o.value == this.model
    );
}
Kagawa
  • 1,319
  • 2
  • 21
  • 33