VueJS在渲染数据之前等待Apollo

问题描述

另一篇文章中的关于骨头的例子...

Bare-bones example from another post...

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/[email protected]/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)填充物品..

Now I get how this works, but I am also integrating apollo for a graphql query. I have apollo populate items..

因此，我添加了apollo和一个已安装(以阻止)

So I add apollo and a mounted (to block)

    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

here is my GET_PERSON graphql if you were wondering

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"

So what happens is, the table tries to load (which is fine), but its trying to filter and grab the data before it has been returned so i am left with an error ofvue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

说实话，我觉得坐骑也许不是正确的方法?

and honestly I feel like mounted may not be the right way to do this?

感谢您的帮助.

谢谢！

推荐答案

因此，最初将其定义为空数组.

So iitially define it as an empty array.

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

这篇关于VueJS在渲染数据之前等待Apollo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！