Question

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

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

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

属性：

data () {
  return {
    allResults: [],
    query: ''
}}

搜索功能使用graphql阿波罗：

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不知道people的{{1}}属性，因此它无法对此做出反应。

初始化您的数据，以便Vue了解其属性

allResults

请参见https://vuejs.org/v2/guide/reactivity.html

兑现承诺后更新财产

1 个答案: