Update deferred demo
parent
02c98a0526
commit
2d6703e45b
|
@ -1,6 +1,6 @@
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
export default class CarService {
|
export default class CustomerService {
|
||||||
|
|
||||||
getCustomersSmall() {
|
getCustomersSmall() {
|
||||||
return axios.get('demo/data/customers-small.json').then(res => res.data.data);
|
return axios.get('demo/data/customers-small.json').then(res => res.data.data);
|
||||||
|
|
|
@ -119,7 +119,6 @@ export default {
|
||||||
sales: null
|
sales: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
|
||||||
created() {
|
created() {
|
||||||
this.sales = [
|
this.sales = [
|
||||||
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||||
|
@ -172,7 +171,6 @@ export default {
|
||||||
sales: null
|
sales: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
|
||||||
created() {
|
created() {
|
||||||
this.sales = [
|
this.sales = [
|
||||||
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||||
|
|
|
@ -21,11 +21,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DeferredContent @load="onDataLoad">
|
<DeferredContent @load="onDataLoad">
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,26 +34,27 @@
|
||||||
<DeferredContentDoc />
|
<DeferredContentDoc />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CarService from '../../service/CarService';
|
import ProductService from '../../service/ProductService';
|
||||||
import DeferredContentDoc from './DeferredContentDoc';
|
import DeferredContentDoc from './DeferredContentDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null
|
products: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onImageLoad() {
|
onImageLoad() {
|
||||||
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
|
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
|
||||||
},
|
},
|
||||||
onDataLoad() {
|
onDataLoad() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsSmall().then(data => this.products = data);
|
||||||
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
|
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -85,35 +85,35 @@ import DeferredContent from 'primevue/deferredcontent';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DeferredContent @load="onDataLoad">
|
<DeferredContent @load="onDataLoad">
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
import CarService from '../../service/CarService';
|
import ProductService from '../../service/ProductService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null
|
products: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onImageLoad() {
|
onImageLoad() {
|
||||||
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
|
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
|
||||||
},
|
},
|
||||||
onDataLoad() {
|
onDataLoad() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsSmall().then(data => this.products = data);
|
||||||
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
|
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue