Search code examples
javascriptvue.jsvuejs2jsfiddlevue-tables-2

Setting up JsFiddle with Vue and vue-tables-2 - t is undefined


I am trying to get help with a particular vue-tables-2 package implementation. In order to do so, I am trying to set up a jsfiddle and keep getting a t is undefined error for even the most basic implementation. Has anyone else run into this error? I suspect it has to do with the importing of dependencies, but cant seem to resolve it.

I appreciate any suggestions on how to get the jsfiddle up and running.

HTML

<div id="app">
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
    el: "#people",
    data: {
        columns: ['name', 'username'],
        options: {
            // see the options API
        }
    }
});

https://jsfiddle.net/kbpq5vb3/35/


Solution

  • It seems the server is not providing the correct data format vue-tables-2 is requiring as stated in the docs:

    You need to return a JSON object with two properties:

    • data : array - An array of row objects with identical keys.
    • count: number - Total count before limit.

    If you can't change what the server returns, you probably have to use the client table where you can grab the data with axios.

    A minimal client table example using axios to grab data. https://jsfiddle.net/kbpq5vb3/38/