![TypeError TypeError](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了VueJS 在渲染数据之前等待 Apollo的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
来自另一篇文章的基本示例...
new Vue({el: '#app',数据: {过滤器:{ID: '',由...发出: '',发给:''},项目:[{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]},计算:{过滤(){const 过滤 = this.items.filter(item => {返回 Object.keys(this.filters).every(key =>字符串(项目[键]).包括(this.filters[键]))})返回filtered.length >0 ?过滤:[{ID: '',由...发出: '',发给:''}]}}})
<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">;</脚本><div id="应用程序"><b-table striped show-empty :items="filtered"><template slot="top-row" slot-scope="{ fields }"><td v-for="字段中的字段" :key="field.key"><input v-model="filters[field.key]" :placeholder="field.label"></td></b-table>
现在我明白了这是如何工作的,但我也在为 graphql 查询集成 apollo.我有阿波罗填充项目..
所以我添加了 apollo 和一个已安装的(阻止)
new Vue({el: '#app',阿波罗:{搜索人:GET_PERSON},数据: {过滤器:{姓名: '',地点: '',搬迁:''},},计算:{过滤(){const 过滤 = this.items.filter(item => {返回 Object.keys(this.filters).every(key =>字符串(项目[key]).包含(this.filters[key]))})返回filtered.length >0 ?过滤:[{姓名: '',地点: '',搬迁:''}]}},挂载:函数(){this.$apollo.queries.searchPersons.refetch().then((结果) => {this.totalRows = results.data.searchPersons.lengththis.items = results.data.searchPersons})},})
如果您想知道,这是我的 GET_PERSON graphql
import { gql } from "apollo-boost";导出 const GET_PERSON = gql`询问 {搜索人(关键字:",来源:假){姓名地点搬迁当前工资简历正文个人邮箱集{电子邮件}人电话集{电话类型验证数字}人员技能集{学期分数重量}personresumeattachmentSet {依恋}个人工作场所偏好集{姓名标签}}}`;
结果是,该表尝试加载(这很好),但它尝试在数据返回之前过滤和抓取数据,所以我留下了一个错误vue.runtime.esm.js?2b0e:619 [Vue 警告]:渲染错误:TypeError:无法读取未定义的属性‘过滤器’"
老实说,我觉得安装可能不是正确的方法?
感谢您的帮助.
谢谢!
解决方案
所以首先将其定义为空数组.
数据:{过滤器:{姓名: '',地点: '',搬迁:''},项目 : []//---^-----},
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/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>
Now I get how this works, but I am also integrating apollo for a graphql query. I have apollo populate items..
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
})
},
})
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
}
}
}
`;
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?
I appreciate any help.
Thanks!
解决方案
So iitially define it as an empty array.
data: {
filters: {
name: '',
location: '',
relocate: ''
},
items : []
//---^-----
},
这篇关于VueJS 在渲染数据之前等待 Apollo的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!