VueJS 在渲染数据之前等待 Apollo

Posted 2023-03-10

【中文标题】VueJS 在渲染数据之前等待 Apollo

【英文标题】：VueJS Wait on Apollo before rendering data

【发布时间】：2019-12-31 05:56:09

【问题描述】：

另一个帖子中的简单示例...

new Vue(
  el: '#app',
  data: 
    filters: 
      id: '',
      issuedBy: '',
      issuedTo: ''
    ,
    items: [id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh',id:5678,issuedBy:'User',issuedTo:'ijkl-mnop']
  ,
  computed: 
    filtered () 
      const filtered = this.items.filter(item => 
        return Object.keys(this.filters).every(key =>
            String(item[key]).includes(this.filters[key]))
      )
      return filtered.length > 0 ? filtered : [
        id: '',
        issuedBy: '',
        issuedTo: ''
      ]
    
  
)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script><script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
<b-table striped show-empty :items="filtered">
  <template slot="top-row" slot-scope=" fields ">
    <td v-for="field in fields" :key="field.key">
      <input v-model="filters[field.key]" :placeholder="field.label">
    </td>
  </template>
</b-table>
</div>

现在我了解了它的工作原理，但我也在集成 apollo 以进行 graphql 查询。我有阿波罗填充项目..

所以我添加了 apollo 和一个挂载（阻止）

    new Vue(
      el: '#app',
      apollo: 
        searchPersons: GET_PERSON
      ,
      data: 
        filters: 
          name: '',
          location: '',
          relocate: ''
        ,
      ,
      computed: 
        filtered () 
          const filtered = this.items.filter(item => 
            return Object.keys(this.filters).every(key =>
                String(item[key]).includes(this.filters[key]))
          )
          return filtered.length > 0 ? filtered : [
            name: '',
            location: '',
            relocate: ''
          ]
        
      ,
      mounted: function () 
          this.$apollo.queries.searchPersons.refetch().then((results) => 
            this.totalRows = results.data.searchPersons.length
            this.items = results.data.searchPersons
          )
      ,
    )

如果你想知道，这是我的 GET_PERSON graphql

import  gql  from "apollo-boost";

export const GET_PERSON = gql`
  query 
    searchPersons(keyword: "", fromSource: false)
      name
      location
      relocate
      currentSalary
      resumeBody
      personemailSet 
        email
      
      personphoneSet 
        phoneType
        verified
        number
      
      personskillsSet 
        term
        score
        weight
      
      personresumeattachmentSet 
        attachment
      
      personworkplacepreferenceSet
        name
        label
      
    
  
`;

所以发生的情况是，表尝试加载（这很好），但它试图在数据返回之前过滤和抓取数据，所以我留下了一个错误 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

老实说，我觉得 mount 可能不是正确的方法吗？

感谢您的帮助。

谢谢！

【问题讨论】：

searchPersons 是否真的需要对 Vue 实例是全局的，还是可以隔离到一个组件中？

【参考方案1】：

所以最初将它定义为一个空数组。

  data: 
    filters: 
      name: '',
      location: '',
      relocate: ''
    ,
    items : []
    //---^-----
  ,