Vue.js Vue Apollo和查询自动完成

我是Vue的新手，现在正在尝试对q-autocomplete组件进行查询更新（我必须使用Quasar框架）

这是FormAdmin组件：

<template> 
  <q-form @submit="submit" @reset="onReset" class="q-gutter-md">      
    <q-select
        filled
        v-model="form.UserId"
        label="User Email"
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        hint="Mininum 2 characters to trigger autocomplete"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>

    <div>
      <q-btn label="Submit" type="submit" color="primary"/>
      <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
    </div>
  </q-form>
</template>

---

但是我不知道如何将查询结果附加到q-select选项中。

我找到了解决方案，我将编写它：

methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }
      setTimeout(() => {
        update(() => {
          this.$apollo.query({
            query: gql`query($email: String!) {
              filterUsersListByEmail(
                email: $email
              ) {
                UserId
                UserEmail
              }
            }`,
            variables: {
              email: val,
            }
          }).then(data => {
            var emailList = [];
            for(var i = 0; i < data.data.filterUsersListByEmail.length; i++)
            {
              emailList[i] = JSON.parse('{"label":"' + data.data.filterUsersListByEmail[i].UserEmail + '", "value":"' + data.data.filterUsersListByEmail[i].UserId + '"}');
            }
            this.options = usersList;
          }).catch(error =>{
            console.log({error});        
          });
        })
      }, 1000)


    },
    onReset(){
      ...
    },
  }

方法：{
filterFn（val、更新、中止）{
如果（值长度<3）{
中止
返回
}
设置超时（（）=>{
更新（（）=>{
这是$apollo.query({
query:gql`query（$email:String！）{
通过电子邮件筛选服务器列表(
电子邮件：$email
) {
用户ID
用户电子邮件
}
}`,
变量：{
电邮:val,，
}
})。然后（数据=>{
var emailList=[]；
对于（var i=0；i{
log（{error}）；
});
})
}, 1000)
},
onReset（）{
...
},
}

    <script>

import gql from 'graphql-tag';

const stringOptions = gql`
  query {
    filterUsersListFirst {
      UserEmail
    }
  }`

export default {
  data () {
    return {
      model: null,
      options: Object.values(stringOptions),
    }
  },
  props: ['form', 'submit'],
  methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }

      this.$apollo.query({
          query: gql`query($email: String!) {
            filterUsersListByEmail(
              email: $email
            ) {
              UserEmail
            }
          }`,
          variables: {
            email: val,
          }
        }).then(data => {
          console.log(JSON.stringyfy(data));
          this.options = Object.values(data);
        }).catch(error =>{
          console.log({error});        
        });
    },
    onReset(){

    },
  }

}

</script>

{"data":{"filterUsersListByEmail":[{"UserEmail":"email1","__typename":"User"},{...}]},"loading":false,"networkStatus":7,"stale":false}

methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }
      setTimeout(() => {
        update(() => {
          this.$apollo.query({
            query: gql`query($email: String!) {
              filterUsersListByEmail(
                email: $email
              ) {
                UserId
                UserEmail
              }
            }`,
            variables: {
              email: val,
            }
          }).then(data => {
            var emailList = [];
            for(var i = 0; i < data.data.filterUsersListByEmail.length; i++)
            {
              emailList[i] = JSON.parse('{"label":"' + data.data.filterUsersListByEmail[i].UserEmail + '", "value":"' + data.data.filterUsersListByEmail[i].UserId + '"}');
            }
            this.options = usersList;
          }).catch(error =>{
            console.log({error});        
          });
        })
      }, 1000)


    },
    onReset(){
      ...
    },
  }