how to select a default value in q-select from quasar?

Question

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)
    );
  });
};

Jaffna

Answer 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
    );
}

Drupe

Answer 2

This use case is provided by the official documentation, you can just use the following template:

<template>
<div class="row">
        <q-select
          filled
          v-model="form.uf"
          :options="optionsUf"
          label="UF"
        />
      </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
let form = reactive({
  uf: ref("GHI"),
});
const optionsUf = ["ABC","DEF","GHI"]
</script>

You can view a complete example from documentation.

Tearoom