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

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

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

Дополнительный контекст:

Пожалуйста, порекомендуйте

1
Robert 11 Сен 2018 в 17:29

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.

0
Phil 11 Сен 2018 в 15:12