使用 Vue 和 vue-tables-2 设置 JsFiddle - t 未定义

Question

我正在尝试获取有关特定 vue-tables-2 程序包实施的帮助。为了做到这一点，我正在尝试设置一个 jsfiddle，即使是最基本的实现也会不断出现 t is undefined 错误。还有其他人运行遇到这个错误吗？我怀疑它与依赖项的导入有关，但似乎无法解决。

我很感激关于如何启动 jsfiddle 和运行ning 的任何建议。

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/

Answer 1

服务器似乎没有提供正确的数据格式 vue-tables-2 是文档中所述的要求：

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.

如果您无法更改服务器 returns 的内容，您可能必须使用客户端 table，您可以在其中使用 axios.

获取数据

使用 axios 抓取数据的最小客户端 table 示例。 https://jsfiddle.net/kbpq5vb3/38/

Answer 2

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.

不一定。您可以坚持使用服务器组件并使用 requestAdapter 和 responseAdapter 选项将请求和响应塑造成预期的格式。

例如（使用 Github 的 API）：

<div id="app">
  <h3>
    Vue Tables 2 - Server Side Demo
  </h3>
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://api.github.com/users/matfish2/repos" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  methods: {
    formatDate(date) {
      return moment(date).format('DD-MM-YYYY HH:mm:ss');
    }
  },
  data: {
    columns: ['name', 'created_at', 'updated_at', 'pushed_at'],
    tableData: [],
    options: {
      perPage: 25,
      perPageValues: [25],
      orderBy: {
        column: 'name',
        ascending: true
      },
      requestAdapter(data) {
        return {
          sort: data.orderBy,
          direction: data.ascending ? 'asc' : 'desc'

        }
      },
      responseAdapter({data}) {
        return {
          data,
          count: data.length
        }
      },
      filterable: false,
      templates: {
        created_at(h, row) {
          return this.formatDate(row.created_at);
        },
        updated_at(h, row) {
          return this.formatDate(row.updated_at);
        },
        pushed_at(h, row) {
          return this.formatDate(row.pushed_at);
        }
      }
    }
  }
});

https://jsfiddle.net/matfish2/js4bmdbL/

使用 Vue 和 vue-tables-2 设置 JsFiddle - t 未定义

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

javascript

jsfiddle

vue.js

vuejs2

vue-tables-2