Как обеспечить динамическое отображение таблицы - PullRequest
Новая
       1

Как обеспечить динамическое отображение таблицы

0 голосов
/ 22 января 2019

Я использую компонент начальной загрузки b-table и b-pagination.Но поскольку существует две записи, поэтому я использую вызов разбиения на страницы для резервной копии, что означает передачу информации о подкачке в бэкэнд, только выборку соответствующих записей для каждой страницы.

Хорошая вещь: 1. Данные передаются правильномежду бэкэндом и фронтэндом.2. Отладка страницы веб-интерфейса с помощью средства отладки VUE, свойства компонента b-таблицы верны.

Проблема: таблица не отображается, она выглядит пустой на странице, если я проверяю элементы черезинструмент для отладки ChromeЭлементы (тело таблицы) для контейнера таблицы пусты.

Краткий пример кода: 

  <b-container>
    <div v-if="guards_for_asyc_fetch_data_call">
      <b-row><b-col><h2>Title</h2></b-col></b-row>
      <b-row>
        <b-col>
          <b-table
            :items="items"
            :fields="fields"
            :current-page="currentPage"
            :per-page="perPage"
            :stacked="true"
            small
            striped
            fixed
            hover/>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <b-pagination
            :total-rows="totalRows"
            :per-page="perPage"
            :number-of-pages="totalPages"
            v-model="currentPage"
            align="center"
          />
        </b-col>
      </b-row>
    </div>
  </b-container>
</template>

<script>
export default {
computed: {

    totalRows() {
      return {dynamic_udpate};
    },
    perPage() {
      return {dynamic_udpate};
    },
    currentPage: {
      get: function() {
         return {dynamic_udpate};
      },
      set: function (newPage) {
         {asyc_call_fetch_data_from_backend}
      }},
    totalPages() {
       return {dynamic_udpate};
    },
    items() {
      return {dynamic_udpate};
    }
  }
}
</script>

Ожидание: содержимое таблицы обновляется динамически, когда данные обновляются после внутреннего вызова.

Фактический результат: Когда я нажимаю на навигацию по странице, кроме 1-й страницы, контейнер просто отображается пустым.Для отладчика vue вы можете видеть, что элементы - это новые извлеченные элементы, идентификатор начинается с 6, так как я выставляю 5 элементов на страницу.Вот ссылка !

Если я пойду проверять общие элементы страницы в отладчике Chrome, содержимое таблицы будет пустым.Вот ссылка !

Кто-нибудь знает, как я могу решить эту проблему?

...