whats up with this error? I even commented the load function
<template>
<div class="page color-theme-green" id="orders-page">
<div class="navbar">
<div class="navbar-bg bg-color-green"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back nav-text">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title nav-text">Orders</div>
</div>
</div>
<div class="toolbar tabbar tabbar-scrollable toolbar-top">
<div class="toolbar-inner">
<a href="#tab-pending" class="tab-link tab-link-active">Pending</a>
<a href="#tab-pickup" class="tab-link ">To Pickup</a>
<a href="#tab-ship" class="tab-link ">To Ship</a>
<!--<a href="#tab-receive" class="tab-link ">To Receive</a>-->
<a href="#tab-completed" class="tab-link ">Completed</a>
<a href="#tab-cancelled" class="tab-link ">Cancelled</a>
</div>
</div>
<div class="tabs">
<!--Start Pending Tab-->
<div id="tab-pending" class="page-content tab tab-active">
<div class="block">
{{#if loading}}
<div class="block text-align-center" style="margin-top: 30vh">
<div class="preloader color-blue"></div>
</div>
{{else}}
<div class="list media-list virtual-list no-hairlines pending">
</div>
{{/if}}
</div>
</div>
<!--End Pending Tab-->
<!--Start Pickup Tab-->
<div id="tab-pickup" class="page-content tab">
<div class="block">
{{#if loading}}
<div class="block text-align-center" style="margin-top: 30vh">
<div class="preloader color-blue"></div>
</div>
{{else}}
<div class="list media-list virtual-list no-hairlines pickup">
</div>
{{/if}}
</div>
</div>
<!--End Pickup Tab-->
<!--Start ship Tab-->
<div id="tab-ship" class="page-content tab">
<div class="block">
{{#if loading}}
<div class="block text-align-center" style="margin-top: 30vh">
<div class="preloader color-blue"></div>
</div>
{{else}}
<div class="list media-list virtual-list no-hairlines ship">
</div>
{{/if}}
</div>
</div>
<!--End ship Tab-->
<!--Start completed Tab-->
<div id="tab-completed" class="page-content tab">
<div class="block">
{{#if loading}}
<div class="block text-align-center" style="margin-top: 30vh">
<div class="preloader color-blue"></div>
</div>
{{else}}
<div class="list media-list virtual-list no-hairlines complete">
</div>
{{/if}}
</div>
</div>
<!--End completed Tab-->
<!--Start cancelled Tab-->
<div id="tab-cancelled" class="page-content tab">
<div class="block">
<div class="block" style="text-align: center">
<i class="f7-icons icon-theme"
style="font-size: 10em;"
>
rocket
</i>
</div>
<div class="block" style="text-align: center">
<p>
Sorry, no items
</p>
</div>
</div>
</div>
<!--End cancelled Tab-->
</div>
</div>
<script>
return{
data: function(){
return{
loading: true,
items: [],
pending: true,
pickup: true,
ship: true,
completed: true,
cancelled: true,
virtualList: null,
pcker: null,
shipper: null,
kumpleto: null
}
},
methods: {
load: function(){
var self = this;
var app = self.$app;
var data = {
"customerId": app.data.userdata.customerId
}
wire.post(app.data.host+'getOrders/', data, function(data){
//alert(data);
try{
var json = JSON.parse(data);
//console.log(json);
if(json.ok == true){
self.$setState({
loading: false,
items: json.data
}).then(function(){
var pending = [];
json.data.forEach(function(data){
if(!data.done){
pending.push(data);
}
})
self.virtualList = app.virtualList.create({
el: '.pending',
items: pending,
itemTemplate: `
<li>
<a href="/view-order/{{orderId}}" class="item-link item-content">
<div class="item-media"><img src="img/sell.png" width="70"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Php {{amount}}</div>
</div>
<div class="item-subtitle">{{modeOfPayment}}</div>
<div class="item-text">{{fdate}}</div>
</div>
</a>
</li>
`,
on: {
itemsAfterInsert: function(){
app.lazy.create(document.getElementById('orders-page'));
}
}
});
var pickupmo = [];
json.data.forEach(function(data){
if(data.done && data.status == 'pending' && data.modeOfPayment == 'pickup'){
pickupmo.push(data);
}
})
self.pcker = app.virtualList.create({
el: '.pickup',
items: pickupmo,
itemTemplate: `
{{#js_if "this.done"}}
<li>
<a href="/view-order/{{orderId}}" class="item-link item-content">
<div class="item-media"><img src="img/sell.png" width="70"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Php {{amount}}</div>
</div>
<div class="item-subtitle">{{modeOfPayment}}</div>
<div class="item-text">{{fdate}}</div>
</div>
</a>
</li>
{{/js_if}}
`,
on: {
itemsAfterInsert: function(){
app.lazy.create(document.getElementById('orders-page'));
}
}
});
var shipmo = [];
json.data.forEach(function(data){
if(data.done && data.status == 'pending' && data.modeOfPayment == 'cod'){
shipmo.push(data);
}
})
self.shipper = app.virtualList.create({
el: '.ship',
items: shipmo,
itemTemplate: `
{{#js_if "this.done"}}
<li>
<a href="/view-order/{{orderId}}" class="item-link item-content">
<div class="item-media"><img src="img/sell.png" width="70"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Php {{amount}}</div>
</div>
<div class="item-subtitle">{{modeOfPayment}}</div>
<div class="item-text">{{fdate}}</div>
</div>
</a>
</li>
{{/js_if}}
`,
on: {
itemsAfterInsert: function(){
app.lazy.create(document.getElementById('orders-page'));
}
}
});
var complete = [];
json.data.forEach(function(data){
if(data.done && data.status == 'done'){
complete.push(data);
}
})
self.kumpleto = app.virtualList.create({
el: '.complete',
items: complete,
itemTemplate: `
{{#js_if "this.done"}}
<li>
<a href="/view-order/{{orderId}}" class="item-link item-content">
<div class="item-media"><img src="img/sell.png" width="70"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Php {{amount}}</div>
</div>
<div class="item-subtitle">{{modeOfPayment}}</div>
<div class="item-text">{{fdate}}</div>
</div>
</a>
</li>
{{/js_if}}
`,
on: {
itemsAfterInsert: function(){
app.lazy.create(document.getElementById('orders-page'));
}
}
});
});//end of state
}else{
app.dialog.alert(json.message);
}
}catch(err){
app.dialog.alert("Error occured");
}
},app)
}
},
on:{
pageBeforeRemove: function(){
},
pageAfterIn: function(e, page){
var self = this;
//self.load();
}
}
}