Как показать данные в таблице VUE, которая находится в массиве массивов

Question

Я пытаюсь отобразить полученные данные из таблицы в виде таблицы значений, но они представлены в сложной форме. Сервер возвращает массив массивов. Так что немного сложно показать их в таблице vue.

Это ответ, который я получил

Определение поля таблицы Vue

`

    export const FieldsDef_doctor_schedule = [
    {
        name:'doctor_id',
        title: 'doctor ID',
        sortField: 'id',
        callback: 'scheduleId'
    },
    {
        name:'department',
        title: 'Department',
        sortField: 'department'
    },
    {
        name:'date',
        title:'Available Time',
        callback:'schedueleCall'
    },
    {
                 name: '__slot:actions',
                 title: 'Actions',
                 dataClass: 'center aligned'
         }
    ]

`

Таблица Vue

Поскольку информация о дате и времени соответствует каждому doctor_id и department. Я хочу, чтобы в таблице vue были показаны все 3 массива с именем date_time в одной строке в соответствии с идентификатором доктора.

Демо

Может кто-нибудь помочь?

Код шаблона

<template>
  <div id="schedule">
    <div class="page-wrapper">
      <div class="container" style="margin-top: 25px;margin-left: 50px;">
        <div class="row">
          <div class="col-md-7">
            <h4 class="page-title">Schedule</h4>
          </div>
          <div class="col-md-4 text-right m-b-20">
            <router-link class="ui button positive" to="/admin/doctors_schedule/addschedule">
              <i class="plus icon"></i>
              <strong>
                Add
                Schedule
              </strong>
            </router-link>
          </div>
        </div>
        <div class="row">
          <div class="col-md-11">
            <hr />
          </div>
        </div>
        <div class="row">
          <div class="col-md-11 border">
            <div class="ui container">
              <filter-bar></filter-bar>
              <vuetable
                ref="vuetable"
                api-url="https://vuetable.ratiw.net/api/users"
                :fields="fields"
                pagination-path
                :per-page="5"
                :multi-sort="true"
                :sort-order="sortOrder"
                :append-params="moreParams"
                @vuetable:pagination-data="onPaginationData"
              >
                <template slot="actions" slot-scope="props">
                  <div class="custom-actions">
                    <router-link to="/admin/doctors_schedule/editschedule" class="ui button yellow">
                      <i class="edit icon"></i>
                    </router-link>
                    <button
                      class="ui button red"
                      @click="onAction('delete-item', props.rowData, 
      props.rowIndex)"
                    >
                      <i class="trash alternate icon"></i>
                    </button>
                  </div>
                </template>
              </vuetable>
              <div class="vuetable-pagination ui basic segment grid">
                <vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>
                <vuetable-pagination
                  ref="pagination"
                  @vuetable-pagination:change-page="onChangePage"
                ></vuetable-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import Vue from "vue";
import VueEvents from "vue-events";
import Vuetable from "vuetable-2/src/components/Vuetable";
import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";
import FilterBar from "@/components/Pages/Admin/import_details/FilterBar";
import { FieldsDef_doctor_schedule } from "@/components/Pages/Admin/import_details/FieldsDef_doctor_schedule";
import { apiDomain } from "@/components/Pages/Authentication/config";

Vue.use(VueEvents);
Vue.component("filter-bar", FilterBar);

export default {
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo
  },
  data() {
    return {
      fields: FieldsDef_doctor_schedule,
      sortOrder: [],
      moreParams: {},
      apiURL: ""
    };
  },
  mounted() {
    this.$events.$on("filter-set", eventData => this.onFilterSet(eventData));
    this.$events.$on("filter-reset", e => this.onFilterReset());
  },
  methods: {
    scheduleId(value) {
      return value;
      console.log(value);
    },
    onPaginationData(paginationData) {
      this.$refs.pagination.setPaginationData(paginationData);
      this.$refs.paginationInfo.setPaginationData(paginationData);
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page);
    },
    onAction(action, data, index) {
      console.log("slot action: " + action, data.name, index);
    },
    onFilterSet(filterText) {
      this.moreParams.filter = filterText;
      Vue.nextTick(() => this.$refs.vuetable.refresh());
    },
    onFilterReset() {
      delete this.moreParams.filter;
      Vue.nextTick(() => this.$refs.vuetable.refresh());
    }
  },
  created() {
    this.apiURL = apiDomain + "api/getDoctorScheduleInfo";
    this.$http
      .get(this.apiURL)
      .then(response => {
        // console.log(response.body.scheduleInfo)
        console.log(response);
        response.body.scheduleInfo.forEach(function(val) {
          // console.log(val.date_time)
          val.date_time.forEach(function(val2) {
            console.log(
              "Date: " +
                val2.date +
                ", Time: " +
                val2.time_from +
                " To " +
                val2.time_to
            );
          });
        });
      })
      .catch(e => {
        console.log(e);
      });
  }
};
</script>

Answer 1

несколько вещей, которые я заметил ...

• вам не хватает атрибута data-path, который вам нужен, потому что ваши данные находятся внутри sheduleInfo переменной
  т.е. 1008 *

• ... но вы также можете использовать свойство transform для обработки / преобразования данных. Поскольку вы хотите перебрать содержимое, это (само по себе) не решит проблему с несколькими записями.

• добавить дополнительный слот в шаблон и обновить конфигурацию (поле даты обновления доиспользуйте __slot:availableTimes вместо)

  <template slot="availableTimes" slot-scope="props">
    <div v-for="(dt, i)props.rowData.date_time" :key="i">
      Date {{dt.date}} ...etc
    </div>
  </template>