db에서 데이터를 가져오고 viewify 데이터 테이블을 채울 때 items.dll을 찾을 수 없습니다.

db에서 데이터를 가져오고 viewify 데이터 테이블을 채울 때 items.dll을 찾을 수 없습니다.

데이터베이스에서 데이터를 가져와서 뷰 테이블에 라라벨, 뷰 및 뷰를 채우려고 합니다.예를 들어 지금까지 데이터 테이블 헤더를 가져올 수 있었지만 inpm을 실행하면 오류 없이 정상적으로 device 컴파일이 실행되지만 콘솔에서 이를 확인할 수 있습니다.

유형 오류: 항목이 발견되지 않았습니다.정렬은 app.js:60601의 함수가 아닙니다.

그리고 데이터베이스에서 데이터를 가져오는 데 사용하는 콘솔에서 xios 함수의 응답을 인쇄했습니다.

Promise
__proto__: Promise
 [[PromiseStatus]]: "resolved"
 [[PromiseValue]]: Array(2)
  0: {Day: "MONDAY", RouteCode: "MO-A", RouteName: "TORRINGTON/RAJAGIRIYA", 
     VehicleNo: "LZ-7878", DriverID: "Janaka Amarathunga", …}
  1: {Day: "MONDAY", RouteCode: "MO-C", RouteName: " AHUNGALLA / KALUTHARA", 
     VehicleNo: null, DriverID: null, …}
 length: 2
 __proto__: Array(0)

app.js 파일

require('./bootstrap');
window.Vue = require('vue');
window.Vuetify = require('vuetify');
import Vuex from 'vuex'
import store from './store/store'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify,Vuex);

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('daily-delivery-planner', require('./components/DailyDeliveryPlanner.vue').default);

const app = new Vue({
    el: '#app',
    store,
});

store.js 파일

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
    strict: true, 
    state: {
      pagination: {
        descending: true,
        page: 1,
        rowsPerPage: 4,
        sortBy: 'fat',
        totalItems: 0,
        rowsPerPageItems: [1, 2, 4, 8, 16]
      },
      items: []
    },
    mutations: {
      setPagination (state, payload) {
        state.pagination = payload
      },
      _setItems (state, { items, totalItems }) {
        state.items = items
        Vue.set(state.pagination, 'totalItems', totalItems)
      }
    },
    actions: {
      queryItems (context) {

        return new Promise((resolve, reject) => {

          const { sortBy, descending, page, rowsPerPage } = context.state.pagination

          setTimeout(() => {

            let dd = getData()
            console.log(dd);

            let items = dd
            const totalItems = items.length

            if (sortBy) {
              items = items.sort((a, b) => {
                const sortA = a[sortBy]
                const sortB = b[sortBy]

                if (descending) {
                  if (sortA < sortB) return 1
                  if (sortA > sortB) return -1
                  return 0
                } else {
                  if (sortA < sortB) return -1
                  if (sortA > sortB) return 1
                  return 0
                }
              })
            }

            if (rowsPerPage > 0) {
              items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
            }

            context.commit('_setItems', { items, totalItems })

            resolve()
          }, 1000)
        })
      }
    },
    getters: {
      loading (state) {
        return state.loading
      },
      pagination (state) {
        return state.pagination
      },
      items (state) {
        return state.items
      }
    }
  })

  async function getData() {
    try {
        const response = await axios.get('getDayRelatedData/'+'Monday');
        return response.data;
    } catch (error) {
        console.error(error);
    }

}

일일 배달 계획자.가치관

<template>
<v-app>
<div class="page-content browse container-fluid">
  <div class="row">
      <div class="col-md-12">
          <div class="panel panel-bordered">
              <div class="panel-body">
                <div class="col-md-9">
                  <div class="form-group row">
                      <label for="day" class="col-sm-1 col-form-label custom-label">Select A Day</label>
                      <div class="col-sm-9">
                        <v-btn color="info" id="Monday">Monday</v-btn>
                        <v-btn color="info" id="Tuesday">Tuesday</v-btn>
                        <v-btn color="info" id="Wednesday">Wednesday</v-btn>
                        <v-btn color="info" id="Thursday">Thursday</v-btn>
                        <v-btn color="info" id="Friday">Friday</v-btn>
                        <v-btn color="info" id="Saturday">Saturday</v-btn>
                        <v-btn color="info" id="Sunday">Sunday</v-btn>
                      </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="">
                      <h4>Route Plan Code : <span class="label label-info" id="routeplanno">{{ routeplan_no }}</span></h4>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div class="col-md-12">
                        <v-data-table
                            must-sort
                            :headers="headers"
                            :pagination.sync="pagination"
                            :rows-per-page-items="pagination.rowsPerPageItems"
                            :total-items="pagination.totalItems"
                            :loading="loading"
                            :items="items"
                            class="elevation-1"
                        >
                            <template slot="items" slot-scope="props">
                                <td class='text-xs-right'>{{ props.item.Day }}</td>
                                <td class='text-xs-right'>{{ props.item.RouteCode }}</td>
                                <td class='text-xs-right'>{{ props.item.RouteName }}</td>
                                <td class='text-xs-right'>{{ props.item.VehicleNo }}</td>
                                <td class='text-xs-right'>{{ props.item.DriverID }}</td>
                                <td class='text-xs-right'>{{ props.item.Routercode1 }}</td>
                                <td class='text-xs-right'>{{ props.item.Routercode2 }}</td>
                                <td class='text-xs-right'>{{ props.item.Capacity }}</td>
                                <td class='text-xs-right'>{{ props.item.planned_trips_count }}</td>
                                <td class='text-xs-right'>{{ props.item.Trip_Count }}</td>
                                <td class='text-xs-right'>{{ props.item.Location }}</td>
                                <td class='text-xs-right'>{{ props.item.FG_Count }}</td>
                                <td class='text-xs-right'>{{ props.item.PET_Count }}</td>
                                <td class='text-xs-right'>{{ props.item.Createuser }}</td>
                            </template>
                        </v-data-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</v-app>
</template>

<script>

export default {
    data () {
    return {
      loading: false,
      routeplan_no:"",
      headers: [
            {
            text: 'Day',
            align: 'left',
            sortable: false,
            value: 'day'
            },
            { text: 'Route Code', value: 'route_code' },
            { text: 'Route Name', value: 'route_name' },
            { text: 'Vehicle No', value: 'vehicle_no' },
            { text: 'Driver Name', value: 'driver_name' },
            { text: 'Router 01', value: 'router_01' },
            { text: 'Router 02', value: 'router_02' },
            { text: 'Capacity', value: 'capacity' },
            { text: 'Planned Trip Count', value: 'planned_trip_count' },
            { text: 'Trip Count', value: 'trip_count' },
            { text: 'Location', value: 'location' },
            { text: 'FG Count', value: 'fg_count' },
            { text: 'PET Count', value: 'pet_count' },
            { text: 'Created User', value: 'created_user' },
        ]
    }
  },
  watch: {
    pagination: {
      handler () {
        this.loading = true
        this.$store.dispatch('queryItems')
          .then(result => {
            this.loading = false
          })
      },
      deep: true
    }
  },
  computed: {
    pagination: {
      get: function () {
        return this.$store.getters.pagination
      },
      set: function (value) {
        this.$store.commit('setPagination', value)
      }
    },
    items () {
      return this.$store.getters.items
    }
  },
  methods: {
      getUserData: function() {
                axios.get('retreiveUserData')
                    .then(({data}) => {
                        if(data.alert=='success'){
                            this.routeplan_no = data.data;
                        }else{
                            this.routeplan_no = Math.floor(1000 + Math.random() * 9000);
                        }
                    });
            }
  },
  beforeMount() {
            this.getUserData();
        }

}

</script>

저는 초보자이기 때문에 이 코드펜을 따라왔습니다.이것이 올바른 접근법입니까?어떤 도움과 제안이든 감사하겠습니다!

발생한 이유:

당신은 비동기식이라고 불렀습니다.getData동기 함수 내부에서 (약속 내부에서).비동기 체인이 끊어졌습니다.

JavaScript가 비동기식으로 실행되고 있기 때문에,items.sort비동기 이전에 발생했습니다.getData그러므로, 결심했습니다.items고요했습니다.undefined그리고 시도할 때items.sortError 유형이 있습니다.

해결 방법:

비동기 프로세스는 함수 체인의 아래쪽 끝까지 비동기 상태를 유지해야 합니다.당신이 부르고 있습니다.getData따라서 비동기식입니다.queryItems또한 비동기식이어야 하므로 응답을 기다릴 수 있습니다.나는 당신이 약속과 비동기를 섞고 있는 것을 보고 변환된 것을 가져왔습니다.queryItems(약속을 되돌리는 것) 두 가지 방법으로 비동기 함수로 변환합니다.

• 사용.async-await:

  async queryItems (context) {
  return new Promise((resolve, reject) => {
  
    const { sortBy, descending, page, rowsPerPage } = context.state.pagination
  
    setTimeout(async () => {
    try{
      let dd = await getData()
     }catch{
      return reject();}
      console.log(dd);
  
      let items = dd
      const totalItems = items.length
  
      if (sortBy) {
        items = items.sort((a, b) => {
          ................................
       return resolve();
  }
  

• 약속 구문만 사용:

  queryItems (context) {
  
  return new Promise((resolve, reject) => {
  
    const { sortBy, descending, page, rowsPerPage } = context.state.pagination
  
    setTimeout(() => {
    return getData().then(dd=>
      console.log(dd);
  
      let items = dd;
      const totalItems = items.length
      if (sortBy) {
        items = items.sort((a, b) => {
          ................................
           return resolve();
        }).catch(e=>{
              return reject(e)})
  }
  

당신의.getData함수는 약속을 반환합니다.직접 정렬할 수 없습니다.사용해야 합니다.async/await위해서.then()약속의 결과를 기다리다

actions: {
  queryItems (context) {
    return getData().then(dd => {
      const { sortBy, descending, page, rowsPerPage } = context.state.pagination
      let items = dd
      const totalItems = items.length

      if (sortBy) {
        items = items.sort((a, b) => {
          const sortA = a[sortBy]
          const sortB = b[sortBy]

          if (descending) {
            if (sortA < sortB) return 1
            if (sortA > sortB) return -1
            return 0
          } else {
            if (sortA < sortB) return -1
            if (sortA > sortB) return 1
            return 0
          }
        })
      }

      if (rowsPerPage > 0) {
        items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
      }

      context.commit('_setItems', { items, totalItems })
    })
  }
}

언급URL : https://stackoverflow.com/questions/54812086/items-sort-not-found-when-trying-to-get-data-from-db-and-populate-vuetify-data-t