динамический v-для рендеринга из http получить результаты для vue компонента - PullRequest
Новая
       6

динамический v-для рендеринга из http получить результаты для vue компонента

0 голосов
/ 07 февраля 2019

Я пытаюсь добиться динамического рендеринга базы элементов из массива возвращаемых элементов целевой конечной точки API.Ниже я попробовал 

<template id="list-comp-tpl">
    <button @click="searchNow">Search Now</button>
    <ul v-for="item in searchResults">
        <li>{{ item.name }}</li>
    </ul>
</template>

<div id="app">
    <list-comp></list-comp>
</div>

Vue.components('list-comp',{
    template : '#list-comp-tpl',
    data() {
        return {
            searchResults : [];
        }
    },
    method : {
        searchNow(){
          // perform api query
          axios.get('http://apiwebsite.com/search')
          .then(function (response) {
            // handle success
            this.searchResults = response.data.msg;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .then(function () {
            // always executed
          });
        }
    }
});

new Vue({
    el '#app'
});

Но компонент list-comp вообще не обновляется, как, например, когда возвращаются данные из API, он не отображается так, как я ожидаю.Любая помощь, идеи, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

для меня «это» не видно в функции (ответ)

решения, которые работают для меня 

 .then(response => this.searchResults = response.data.msg)

или, если вы заинтересованы в функции (ответ), попробуйте это:

searchNow(){
      _self = this;
      // perform api query
      axios.get('http://apiwebsite.com/search')
      .then(function (response) {
        // handle success
        _self.searchResults = response.data.msg;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    }
0 голосов
/ 07 февраля 2019

Попробуйте назначить значения, как показано. 

this.searchResults = Object.assign({}, response.data.msg);

При настройке значений в массиве они не устанавливаются как реактивные свойства в DOM.Следовательно, ваш компонент не обновляется новыми данными.

Вы также можете использовать Vue.set для обновления значений массива.

См. Ссылку ниже.https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

...