解决承诺时更新属性

Question

预期结果：来自响应的数据显示在模式上

实际结果：响应中的数据未显示在模态中

上下文：我正在使用表单将数据提交给搜索功能，并承诺从数据库中获取结果。当我提交时，我还会打开一个模式来显示结果。模式已经打开，带有一个名为 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'],

附加上下文：

请指教

Answer 1

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

您最初将allResults 设置为一个空数组，很酷。但是，您似乎正在为其分配一个对象，这由您使用 this.allResults.people 表示。

Vue 不知道 allResults 上的 people 属性，因此无法对其做出反应。

初始化你的数据，让 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