如何在 quasar 的 q-select 中选择默认值？

Question

我需要我的 q-select 根据之前分配的“id”来选择“名称”。目前，输入显示的是数字“id”，而不是它所属的名称。

 <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>

示例 我希望在 q-select 中显示已加载的 id: 12 的名称。

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

Answer 1

我遇到了同样的问题，无法找到设置对象类型默认值的正确方法。

我最终使用 find() 来查找选项中的默认值并将其分配给页面创建的事件。

created() {
    this.model = this.options.find(
        (o) => o.value == this.model
    );
}