Question

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

JSON.stringify(e[i])

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: ''
      }]
    }
  }
})

现在我了解了它是如何工作的，但我也正在为一个graphql查询集成apollo。我有阿波罗填充项目。

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

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

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

    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
          })
      },
    })

所以发生了什么，该表尝试加载（很好），但是它试图在返回之前过滤并抓取数据，所以我遇到了错误 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 } } } `;

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

感谢您的帮助。

谢谢！

Answer 1

因此最初将其定义为一个空数组。

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

VueJS在渲染数据之前等待Apollo

1 个答案: