在解决承诺时更新属性

问题描述 投票:1回答:1

预期结果:响应数据显示在模态上

实际结果:响应数据未显示在模态上

上下文:我正在使用表单向搜索功能提交数据,并承诺从数据库中获取结果。当我提交时,我还打开一个模态来显示结果。模态已经打开,名为allResults的属性为空。我试图了解如何将我从已解析的承诺中获得的数据绑定到连接到模态的allResults属性。或者换句话说,当promise得到解决时,如何触发属性“刷新”。当我实现watchcomputed属性时,它们会在返回数据之前被调用。

属性:

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'],

附加背景:

请指教

javascript vue.js promise
1个回答
0
投票

这是数据初始化和反应性问题。

您最初将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
    }
  }
}

https://vuejs.org/v2/guide/reactivity.html

© www.soinside.com 2019 - 2024. All rights reserved.