Javascript 尝试从db获取数据并填充vuetify数据表时未找到items.sort
我正试图从数据库中获取数据,并用laravel、vue和vuetify填充vuetify表。到目前为止,通过这个示例,我已经获得了datatable头,但当我运行npm run dev时,它可以正常编译,没有任何错误,但在控制台中我得到了这个结果 未捕获类型错误:items.sort不是函数 在app.js:60601 我已经在控制台中打印了axios函数的响应,我用它从数据库中获取数据Javascript 尝试从db获取数据并填充vuetify数据表时未找到items.sort,javascript,laravel,vue.js,vuex,vuetify.js,Javascript,Laravel,Vue.js,Vuex,Vuetify.js,我正试图从数据库中获取数据,并用laravel、vue和vuetify填充vuetify表。到目前为止,通过这个示例,我已经获得了datatable头,但当我运行npm run dev时,它可以正常编译,没有任何错误,但在控制台中我得到了这个结果 未捕获类型错误:items.sort不是函数 在app.js:60601 我已经在控制台中打印了axios函数的响应,我用它从数据库中获取数据 Promise __proto__: Promise [[PromiseStatus]]: "resolv
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);
}
}
从“Vue”导入Vue;
从“Vuex”导入Vuex;
Vue.use(Vuex);
导出默认的新Vuex.Store({
严格:是的,
声明:{
分页:{
是的,
页码:1,
行页码:4,
糟糕的是:“胖”,
总计项目:0,
rowsPerPageItems:[1,2,4,8,16]
},
项目:[]
},
突变:{
设置分页(状态、有效负载){
state.pagination=有效负载
},
_setItems(状态,{items,totalItems}){
state.items=项目
Vue.set(state.pagination,'totalItems',totalItems)
}
},
行动:{
查询项(上下文){
返回新承诺((解决、拒绝)=>{
const{sortBy,descending,page,rowsPerPage}=context.state.pagination
设置超时(()=>{
设dd=getData()
控制台日志(dd);
let items=dd
const totalItems=items.length
if(sortBy){
项目=项目。排序((a,b)=>{
常数sortA=a[sortBy]
常数sortB=b[sortBy]
如果(降序){
if(sortAsortB)返回-1
返回0
}否则{
if(sortA排序)返回1
返回0
}
})
}
如果(行页面>0){
items=items.slice((第-1页)*行页面,第*页行页面)
}
commit(''u setItems',{items,totalItems})
解决()
}, 1000)
})
}
},
吸气剂:{
装载(状态){
返回状态。加载
},
分页(状态){
返回状态。分页
},
项目(国家){
返回状态.items
}
}
})
异步函数getData(){
试一试{
const response=await axios.get('getDayRelatedData/'+'Monday');
返回响应数据;
}捕获(错误){
控制台错误(error);
}
}
DailyDeliveryPlanner.vue
<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>
选择一天
星期一
星期二
星期三
星期四
星期五
星期六
星期日
路线图代码:{{routeplan_no}}
{{props.item.Day}
{{props.item.RouteCode}
{{props.item.RouteName}
{{props.item.VehicleNo}
{{props.item.DriverID}
{{props.item.Routercode1}
{{props.item.Routercode2}
{{props.item.Capacity}
{{props.item.planned_trips_count}
{{props.item.Trip_Count}
{{props.item.Location}
{{props.item.FG_Count}
{{props.item.PET_Count}
{{props.item.Createuser}
导出默认值{
数据(){
返回{
加载:false,
路线图编号:“,
标题:[
{
文本:“天”,
对齐:“左”,
可排序:false,
价值:'天'
},
{text:'Route Code',value:'Route_Code'},
{text:'Route Name',value:'Route_Name'},
{文本:“车辆编号”,值:“车辆编号”},
{文本:'Driver Name',值:'Driver_Name'},
{文本:'Router 01',值:'Router_01'},
{文本:'Router 02',值:'Router_02'},
{text:'Capacity',value:'Capacity'},
{文本:“计划行程计数”,值:“计划行程计数”},
{文本:'Trip Count',值:'Trip_Count'},
{text:'Location',value:'Location'},
{文本:'FG Count',值:'FG_Count'},
{文本:'PET Count',值:'PET_Count'},
{text:'Created User',value:'Created_User'},
]
}
},
观察:{
分页:{
处理程序(){
这是真的
此.$store.dispatch('queryItems'))
。然后(结果=>{
此参数为0。加载=错误
})
},
深:是的
}
},
计算:{
分页:{
get:function(){
返回此。$store.getters.pagination
},
设置:函数(值){
此.$store.commit('setPagination',value)
}
},
项目(){
返回此。$store.getters.items
}
},
方法:{
getUserData:函数(){
get('retreiveUserData')
.那么(
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)})
}
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 })
})
}
}