Блог

У меня есть компонент Vuetify Datatable с данными на стороне сервера. Я хотел бы отсортировать данные на стороне клиента с тем, что я сейчас отображаю. Но когда я нажимаю на столбец для сортировки, он ничего не делает. Столбец содержит строковые значения.

Ниже приведен мой datatable:

 <v-data-table
    :page="page"
    :pageCount="numberOfPages"
    :headers="headers"     
    :items="services"
    :options.sync="options"
    :server-items-length="totalElements"
    :loading="loading"    
     :custom-filter="filterOnlyCapsText"
    class="elevation-1"
    @update:page="updatePagination"    
    :items-per-page="itemsPerPage"
    @update:items-per-page="setItemsPerPage"   
  >
  

Мой код Vuejs:

  data() {
    return {
      headers: [
        {
          text: "Service",
          value: "name",
          sortable: true,
        },
        {
          text: "Application",
          value: "application.name",
        },
        {
          text: "Description",
          value: "description",
        },
        {
          text: "Endpoint",
          value: "endpoint",
        },
        {
          text: "Environment",
          value: "environmentList",
        },
      ],
      page: 1,
      totalElements: 0,
      numberOfPages: 0,
      services: [],
      loading: true,
      options: {},
      itemsPerPage: 0,
      search: "",
    };
  },

  options: {
    handler() {
      console.log("handler got called");
    },
    deep: true,
  },
  

Я не уверен, что нужно для сортировки столбца на стороне клиента. Есть ли слушатель, к которому мне нужно подключиться?

Спасибо

Вы используете подкачку на стороне сервера и должны реализовать эту функциональность с помощью соответствующих вызовов API, когда события

 update:page, update:sortBy, update:options
  

отправлено.

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

Опция, которая включает поведение на стороне сервера: server-items-length

Определение этого реквизита отключит встроенную сортировку и разбивку на страницы.