Can't render vuetable

[WolfDan]

Hi!

I have trying for many time to get run vuetable, but I always get the same error:

Uncaught TypeError: Cannot read property 'get' of undefined TypeError: Cannot read property '_updateFromParent' of undefined

My api does not have any problem, this is my code for vue:

html:

<div class="tab-content">
    <div class="row">
        <div class="table-responsive">
            <vuetable ref="vuetable"
                      api-url="/api/ladder/achievement"
                      :fields="columns"
                      :per-page="perPage"
                    ></vuetable>
        </div>
    </div>
</div>

js:

import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue'
import VuetablePaginationDropdown from 'vuetable-2/src/components/VuetablePaginationDropdown.vue'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue'

var locales = {
    es: {
        message: {
            avatar: 'Avatar',
            nickname: 'Apodo',
            level: 'Nivel',
            point: 'Puntos',
        }
    },
    fr: {
      message: {
          avatar: 'Avatar',
          nickname: 'Nickname',
          level: 'Level',
          point: 'Points',
      }
    },
    en: {
        message: {
            avatar: 'Avatar',
            nickname: 'Nickname',
            level: 'Level',
            point: 'Points',
        }
    }
}

Vue.config.lang = document.querySelector('#lang').getAttribute('value')
Object.keys(locales).forEach(function(lang) {
    Vue.locale(lang, locales[lang])
})

new Vue({
    el: '#app',
    components: {
      Vuetable,
      VuetablePagination,
      VuetablePaginationDropdown,
      VuetablePaginationInfo,
    },
    data: {
        perPage: 15,
        columns: [{
            name: 'avatar_url',
            title: Vue.t('message.avatar'),
            dataClass: 'text-center',
            callback: 'image',
            titleClass: 'text-center',
        }, {
            name: 'Name',
            title: Vue.t('message.nickname'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }, {
            name: 'level',
            title: Vue.t('message.level'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }, {
            name: 'AchievementPoints',
            title: Vue.t('message.point'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }],
    },
    watch: {
      'perPage' (val, oldVal) {
        this.$nextTick(function() {
          this.$refs.vuetable.refresh()
        })
      },
    },
    methods: {
        image: function(str) {
            return '<img v-lazy="/template/img/ladder/heads/' + str + '" width="27">'
        }
    }
})

So what is wrong with my code? I miss any reference or?

So many thanks for you help, and sorry if my english it's not perfect I still learning ^^

[ratiw]

@WolfDan Have you tried using full URL instead of /api/ladder/achievement?

[WolfDan]

@ratiw Thanks for the answer, I try use full URL but sadly isn't working, if you like full log:

Uncaught TypeError: Cannot read property 'get' of undefined
    at VueComponent.loadData (eval at <anonymous> (main_pack.js:102), <anonymous>:306:55)
    at VueComponent.boundFn [as loadData] (vue.js:131)
    at VueComponent.created (eval at <anonymous> (main_pack.js:102), <anonymous>:214:12)
    at callHook (vue.js:2610)
    at VueComponent.Vue._init (vue.js:3364)
    at new VueComponent (vue.js:3483)
    at createComponentInstanceForVnode (vue.js:2761)
    at init (vue.js:2771)
    at createComponent (vue.js:4120)
    at createElm (vue.js:4063)
loadData @ Vuetable.vue?e64a:301
boundFn @ vue.js:131
created @ Vuetable.vue?e64a:214
callHook @ vue.js:2610
Vue._init @ vue.js:3364
VueComponent @ vue.js:3483
createComponentInstanceForVnode @ vue.js:2761
init @ vue.js:2771
createComponent @ vue.js:4120
createElm @ vue.js:4063
createChildren @ vue.js:4171
createElm @ vue.js:4096
createChildren @ vue.js:4171
createElm @ vue.js:4096
createChildren @ vue.js:4171
createElm @ vue.js:4096
createChildren @ vue.js:4171
createElm @ vue.js:4096
createChildren @ vue.js:4171
createElm @ vue.js:4096
patch @ vue.js:4552
Vue._update @ vue.js:2490
(anonymous) @ vue.js:2464
get @ vue.js:1663
Watcher @ vue.js:1655
Vue._mount @ vue.js:2463
Vue$3.$mount @ vue.js:6104
Vue$3.$mount @ vue.js:8494
initRender @ vue.js:3060
Vue._init @ vue.js:3365
Vue$3 @ vue.js:3412
(anonymous) @ script.js:33
vue.js:439 TypeError: Cannot read property '_updateFromParent' of undefined
    at prepatch (vue.js:2791)
    at patchVnode (vue.js:4385)
    at updateChildren (vue.js:4312)
    at patchVnode (vue.js:4396)
    at updateChildren (vue.js:4312)
    at patchVnode (vue.js:4396)
    at updateChildren (vue.js:4312)
    at patchVnode (vue.js:4396)
    at updateChildren (vue.js:4312)
    at patchVnode (vue.js:4396)

I was working with vue 1.0.28 and all was fine, but I update to vue 2 and it's the online plugin that don't work for me and I use it a lot hahahaha, I hope can be solved

[ratiw]

@WolfDan Everything is pointing to loadData(), but it's hard to say without really inspecting the code. By the way, have you import and register vue-resource? If not, the Vue.http might be undefined, therefore causing the error.

[WolfDan]

I found the solution!

In my project I'm using axios for http request, so maybe when I compile Vue.http its undefined, so I copy the components and modify Vuetable.vue from this:

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

export default {

to this:

<script>
Vue.use(VueResource)

Also I have tested with axios and just do this:

<script>
import axios from 'axios' // if you use cnd so delete this 
Vue.prototype.$htpp = axios // this is you don't reference vue resource
Vue.http = axios //this if you reference vue resource
// don't import resource etc 

//other component code
loadData: function(success = this.loadSuccess, failed = this.loadFailed) {
      this.fireEvent('loading')

      this.httpOptions['params'] = this.getAllQueryParams()

      this.$http.get(this.apiUrl, this.httpOptions).then( //Vue.http to this.$http
        success,
        failed
      )
    },
    loadSuccess: function(response) {
      this.fireEvent('load-success', response)

      let body = this.transform(response.data) //replace body to data

      this.tableData = this.getObjectValue(body, this.dataPath, null)
      this.tablePagination = this.getObjectValue(body, this.paginationPath, null)

      if (this.tablePagination === null) {
        this.warn('vuetable: pagination-path "' + this.paginationPath + '" not found. '
          + 'It looks like the data returned from the sever does not have pagination information '
          + 'or you may have set it incorrectly.'
        )
      }

      this.$nextTick(function() {
        this.fireEvent('pagination-data', this.tablePagination)
        this.fireEvent('loaded')
      })
    },

In fact I don't know why don't work directly on npm package (I have VueResource in my npm too) I hope can be usefull for someone that has my same problem, also if like update the code to axios ^^

Thanks @ratiw for your time