самозагрузки-вю - таблица не будет обновляться после запроса AJAX (vue2.js)

Question

Я довольно новый с vue.js, и я увидел эту большую библиотеку, которая делает именно то, что мне нужно для моего проекта: Boostrap-Vue

example source code

Я следовал основные инструкции и я добавил небольшое изменение, AJAX вызов для динамического контента:

<layout :docs="docs"> 
    <template slot="demo"> 

     <b-table 
       stripped 
       hover 
       :items="items" 
       :fields="fields" 
       :current-page="currentPage" 
       :per-page="perPage" 
       :filter="filter" 
     > 
      <template slot="name" scope="item"> 
       {{item.value.first}} {{item.value.last}} 
      </template> 

     </b-table> 

    </template> 

</layout> 

экспорта по умолчанию {

mounted() { 
     this.get_data(); 
    }, 
    data() { 
     return { 
      docs: { 
       component: 'bTable' 
      }, 
      items: [], 
      fields: { 
       name: {label: 'Person Full name', sortable: true}, 
      }, 
      currentPage: 1, 
      perPage: 5, 
      filter: null 
     }; 
    }, 
    methods: { 
     get_data() {    
     this.$http.get("myapp/users").then(res => { 
      if (res.body) { 
       this.items = res.body; 
      } else { 
       this.error = true; 
      } 
     }); 
     } 
    } 
}; 

Так что проблема - после того, как я получаю ответ Ajax и «пунктов» переменная инициализирована с данными, но таблица еще не получит обновление.

Самая странная часть - это то, что со статическими данными ее работы прекрасны (как показано в исходном коде примера, без AJAX).

Любая идея, почему? Спасибо !!!

Answer 1

Я нашел проблему , представляется необходимым определить следующие поля в соответствии со значением I, полученным в ответ:

fields: { 
      name: {label: 'Person Full name', sortable: true}, 
     } 

так, если моя JSON выглядит следующим образом:

{user_name: "user"} 

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

fields: { 
      user_name: {label: 'Person Full name', sortable: true}, 
     } 

Во всяком случае, Yoram de Langen Спасибо за помощь!

Answer 2

Вы пытались отладить res.body и что он содержит? Какая структура возвращает ваш myapp/users? Есть ли вернуть структуру непосредственно следующим образом:

[ 
    { "name": "item 1"}, 
    { "name": "item 1"}, 
] 

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

{ 
    "result": [ 
     { "name": "item 1"}, 
     { "name": "item 1"}, 
    ] 

} 

В случае последнего один ваш this.items = res.body должен быть: this.items = res.body.result