Quasar框架q-select组件如何根据绑定id默认选中并显示对应name值

问题根因 #

你当前的配置本身是正确的，问题核心是初始化阶段options数组为空，q-select在给v-model赋值12时，没有对应的选项数据可以匹配ID找到name字段，所以只能直接显示v-model的原始数字值12。你现有的filterFn仅在输入触发过滤时才给options赋值，初始状态下options一直是空数组，自然无法匹配默认值。 #

修复步骤 #

• 组件初始化阶段就给options赋完整的全量数据源，不要等过滤触发才赋值
• 如果tableData是后端接口返回的异步数据，要等接口请求完成、tableData赋值后，再给v-model赋值，确保匹配时能找到对应选项

修正后代码示例 #

模板部分 #

你现有的option-label、option-value、emit-value、map-options配置完全正确，不需要修改：

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

逻辑部分 #

补充初始化赋值逻辑：

import { ref, onMounted } from 'vue'

// 初始先设为空，等数据源加载完成再赋值
const model = ref(null)
const options = ref([])

// 假设tableData是你的全量选项数据源
onMounted(() => {
  // 如果tableData是接口返回的，把下方逻辑放到接口请求的成功回调里
  options.value = tableData.value
  // 等options赋值完成后再给model赋值，此时就能匹配到对应的name显示
  model.value = 12
})

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

异常排查点 #

如果修改后仍有问题，可以检查两个细节：

1. 确认option-label绑定的name字段和tableData里的字段名完全一致，无拼写错误
2. 确认ID=12的选项确实存在于tableData中，且ID的类型和model值类型匹配（不要出现一个是数字12、一个是字符串"12"的情况）

内容的提问来源于stack exchange，提问作者Nc92