Vue Quasar -异步数据默认为[对象对象]的Qselect

<template>
  <q-select
    v-model="selected"
    :options="options"
    label="name" <!-- 指定显示的字段 -->
    value="id" <!-- 指定值的字段 -->
    :loading="loading"
    @filter="filterFn"
  />
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [],
      loading: false,
    };
  },
  methods: {
    async filterFn(val, update) {
      update(() => {
        const needle = val.toLowerCase();
        this.loading = true;
        // 模拟异步请求
        setTimeout(() => {
          this.options = [
            { id: 1, name: 'Alice' },
            { id: 2, name: 'Bob' },
            { id: 3, name: 'Charlie' },
          ].filter(v => v.name.toLowerCase().indexOf(needle) > -1);
          this.loading = false;
        }, 500);
      });
    }
  }
};
</script>