Обновление свойства, когда обещание разрешено

Question

Ожидаемый результат: данные из ответа отображаются в модальном

Фактический результат: данные из ответа не отображаются на модальном

Контекст: я использую форму для отправки данных в функцию поиска с обещанием получить результаты из БД. Когда я отправляю, я также открываю модальное окно для отображения результатов. Модальное окно уже открывается со свойством allResults, которое пусто. Я пытаюсь понять, как связать данные, полученные из разрешенного обещания, со свойством allResults, связанным с модальным. Или, другими словами, как вызвать свойство «обновить», когда обещание будет выполнено. Когда я реализую свойство 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 не знал о свойстве 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