Как вывести данные с сервера в табилицу bootstrap-vue?

Question

[stalker777]

mounted(){
axios.get(url).then(
res => {
this.items = res.data.array
console.log(this.items)
}
)
},

Данные приходят но в консоле ошибка Vue [Vue warn]: Error in data(): "TypeError: _this2 is undefined" и т.д.

Answer 1

[Михаил]

Обычным v-for
https://bootstrap-vue.js.org/docs/components/table

Comments

[stalker777]

Там ведь не используется v-for

data: () => ({
items: null,
fields: [
{ key: 'type', label: 'Type', sortable: true, sortDirection: 'desc' },
{ key: 'name', label: 'Name', sortable: true },
{ key: 'ip', label: 'IP address' },
{ key: 'status', label: 'Status' },
{ key: 'actions', label: 'Actions' }
],
currentPage: 1,
totalRows: this.items.length,
pageOptions: [ 5, 10, 15 ],
sortBy: null,
sortDesc: false,
sortDirection: 'asc',
filter: null,
})

[stalker777]

Если создавал items в data() то без проблем выводит, но те же самые данные не выводит если запрос сервера делать

[Михаил]

stalker777, _this2 is undefined это что-то в компиляции, судя по предоставленному коду

[stalker777]

Михаил, тут вроде написано мельком но я не понял куда вставлять this.$refs.table.refresh() пробовал после запроса не работает
https://bootstrap-vue.js.org/docs/components/table...

[Михаил]

stalker777,
this.items = res.data.array
должно обновить таблицу (логично)
чему там this равен?

[stalker777]

Михаил, (2) […]
​this - "$attrs": ​
"$children": Array [ {…}, {…} ]
​
"$createElement": function $createElement()​
"$el": ​
"$listeners":
​
"$options": Object { parent: {…}, _parentVnode: {…}, propsData: undefined, … }
​
"$parent": Object { _uid: 9, _isVue: true, "$options": {…}, … }
​
"$refs": Object { table: {…}, domain: div.position-relative.form-group
}
​
"$root": Object { _uid: 4, _isVue: true, "$options": {…}, … }
​
"$scopedSlots": Object { … }
​
"$slots": Object { }
​
"$store": Object { _committing: false, _actions: {…}, _actionSubscribers: [], … }
​
"$vnode": Object { tag: "vue-component-328", data: {…}, children: undefined, … }
​
_c: function _c()​
_computedWatchers: Object { sortOptions: {…} }
​
_data: Object { … }
​
_directInactive: false
​
_events: Object { }
​
_hasHookEvent: false
​
_inactive: null
​
_isBeingDestroyed: false
​
_isDestroyed: false
​
_isMounted: true
​
_isVue: true
​
_renderProxy: Proxy { : {…}, : {…} }
​
_routerRoot: Object { _uid: 4, _isVue: true, "$options": {…}, … }
​
_self: Object { _uid: 97, _isVue: true, "$options": {…}, … }
​
_staticTrees: null
​
_uid: 97
​
_vnode: Object { tag: "div", data: undefined, children: (3) […], … }
​
_watcher: Object { deep: false, user: false, lazy: false, … }
​
_watchers: Array [ {…}, {…} ]
​
info: function info()
​
items: Array [ {…}, {…} ]
​
onFiltered: function onFiltered()
​
resetModal: function resetModal()
​
toogBtn: function toogBtn()
​
toogleButton: function toogleButton()
​
: function reactiveGetter()​
: function reactiveSetter()​
: function reactiveGetter()​
: function reactiveSetter()​
: Object { constructor: VueComponent(), sortOptions: Getter & Setter }

мой ответ на запрос
0: Object { id: "8eb5983f-0401-4267-aa95-f1d63e5550b1", type: "123", name: "456", … }
​
1: Object { id: "35e0de7c-f4bf-487c-994a-889ed1a1f37a", type: "123", name: "456", … }
​
length: 2
​
: [

[stalker777]

Михаил, console.log(this)
console.log(this.items)

[Михаил]

stalker777, items изначально есть в data?

[stalker777]

Михаил, Да, она равна null

[Михаил]

data: () => ({
  items: [];
})

[stalker777]

Михаил, Нет все та же ошибка и консоль лог не поменялся

[stalker777]

Михаил, Спасибо тебе за отклик! Решил задачу на свежую голову) Оказывается проблема заключалась в totalRows: this.items.length, Я его изменил на null и в коде ниже после ответа присвоил ему длину items. Также добавил атрибут ref="mytable" в

axios.get(url).then(
        res => {
          this.items = res.data.array
          this.totalRows = this.items.length
          this.$refs.mytable.refresh()
        }
      )