Vue-Apollo 和查询自动完成

Question

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

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

这是更新函数到 filterFn 的基本代码：

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

      update(() => {
        console.log(val);
      })
    },
    onReset(){

    },
  }
}
</script>

我试过这段代码：

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

我尝试了 graphql 查询服务器端，它有效。我还尝试打印 Promise returns 的数据，结果是：

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

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

Answer 1

我自己找到了解决方案，我会写出来：

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(){
      ...
    },
  }

Vue-Apollo 和查询自动完成

Vue-Apollo and query autocomplete

apollo

vue.js

graphql

vue-apollo

quasar-framework