Vue-Apollo 和查询自动完成

Posted 2023-03-10

【中文标题】Vue-Apollo 和查询自动完成

【英文标题】：Vue-Apollo and query autocomplete

【发布时间】：2020-03-29 04:24:17

【问题描述】：

我是 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 返回的数据，结果是：

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

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

【参考方案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()
      ...
    ,