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

Я пытаюсь получить помощь по конкретной реализации пакета 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/


javascript vue.js vuejs2 vue-tables-2 jsfiddle
person AnchovyLegend    schedule 28.12.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Кажется, сервер не предоставляет правильный формат данных, который требуется vue-tables-2, как указано в документах:

Вам нужно вернуть объект JSON с двумя свойствами:

  • data : array — Массив объектов строк с одинаковыми ключами.
  • count: number - Общее количество до лимита.

Если вы не можете изменить то, что возвращает сервер, вам, вероятно, придется использовать клиентскую таблицу, откуда вы можете получить данные с помощью axios.

Пример минимальной клиентской таблицы с использованием axios для получения данных. https://jsfiddle.net/kbpq5vb3/38/

person Psidom    schedule 28.12.2017

arrow_upward
0
arrow_downward

Если вы не можете изменить то, что возвращает сервер, вам, вероятно, придется использовать клиентскую таблицу, где вы можете получить данные с помощью 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/

person Matanya    schedule 17.03.2018
comment
Я использовал решение, которое вы предложили как более удобное, но я получил эту ошибку Исключение jQuery.Deferred: невозможно прочитать длину свойства undefined TypeError: невозможно прочитать длину свойства undefined в VueComponent.responseAdapter (webpack-internal:// /./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue -loader/lib/index.js?!./src/components/Builds.vue?vue&type=script&lang=js&:48:25) - person Mostafa Hassan; 24.06.2020