预期结果:响应数据显示在模态上
实际结果:响应数据未显示在模态上
上下文:我正在使用表单向搜索功能提交数据,并承诺从数据库中获取结果。当我提交时,我还打开一个模态来显示结果。模态已经打开,名为allResults
的属性为空。我试图了解如何将我从已解析的承诺中获得的数据绑定到连接到模态的allResults
属性。或者换句话说,当promise得到解决时,如何触发属性“刷新”。当我实现watch
或computed
属性时,它们会在返回数据之前被调用。
属性:
data () {
return {
allResults: [],
query: ''
}}
搜索功能使用graphql apollo:
onSubmit () {
this.$apollo.query({
query: FIND_PEOPLE,
variables: {
name: this.query
}
}).then((response) => {
let a = response.data.given_names # array
let b = response.data.family_names # array
let c = []
a.forEach(function(el) {
if (!c.includes(el)) {
c.push(el)
}
})
var result = c.map(a => a.id);
b.forEach(function(el) {
if (!result.includes(el.id)) {
c.push(el)
}
})
this.allResults.people = []
this.allResults.people = c
this.allResults.clubs = response.data.clubs
});
}
表格:
<b-nav-form @submit="onSubmit">
<b-form-input size="sm" class="mr-sm-2" type="text" v-model="query" id="navbar-search-input" />
<b-button size="sm" class="my-2 my-sm-0" v-b-modal="'search-results-modal'" type="submit">Zoek</b-button>
</b-nav-form>
模式:
<SearchResultsModal :all-results="allResults" :query="query"/>
模态组件:
<b-modal hide-footer ref="searchResultsModal" id="search-results-modal">
<p>{{"Searchterm: " + this.query}}</p>
<ul v-for="result of this.allResults.people" :key="result.id">
<li><b-link @click="selectResult('person', result.id)">{{result|personFullName}}</b-link></li>
</ul>
</b-modal>
道具:
props: ['allResults', 'query'],
附加背景:
请指教
这是数据初始化和反应性问题。
您最初将allResults
设置为空数组,很酷。但是你似乎正在为它分配一个对象,用你使用this.allResults.people
表示。
Vue不知道people
上的allResults
属性,所以它无法对它作出反应。
初始化您的数据,以便Vue了解其属性
data () {
return {
query: '',
allResults: { // an object, not an array
people: [],
clubs: [] // assuming this is also an array
}
}
}