Настройка JsFiddle с помощью Vue и vue-tables-2 - t не определена

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 варианты оформления запроса и ответа в ожидаемом формате.

Например (используя API Github):

<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/