Question

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

我很欣赏有关如何启动和运行jsfiddle的任何建议。

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所需的正确数据格式：

您需要返回具有两个属性的JSON对象：


data：array - 具有相同键的行对象数组。

count：number - 限制前的总计数。

如果您无法更改服务器返回的内容，则可能必须使用客户端表，您可以使用axios获取数据。

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

Answer 2

如果您无法更改服务器返回的内容，则可能必须使用客户端表，您可以使用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 -t设置JsFiddle是未定义的

2 个答案: