代码之家 › 专栏 › 技术社区 › Robert

解决承诺时更新属性

promise vue.js javascript

Robert · 技术社区 · 6 年前

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

实际结果:来自响应的数据不显示在模式上

上下文:我使用一个表单向搜索函数提交数据,并承诺从数据库中获取结果。提交时,我还打开一个模式来显示结果。模式已打开,属性名为 allResults 那是空的。我试图理解如何将我从已解决的承诺中获得的数据绑定到 所有结果 属性连接到模式。或者换句话说,当承诺得到解决时,如何触发属性“刷新”。当我执行 watch 或 computed 在返回数据之前调用的属性。

性能:

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

search函数使用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'],

附加上下文:

请告知

1 回复 | 直到 6 年前

Phil 6 年前

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

你最初设定的 allResults 到一个空数组,酷。但你似乎在给它分配一个对象,用你的 this.allResults.people .

Vue不知道 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