Update deferred demo

pull/358/head
cagataycivici 2020-07-02 18:17:07 +03:00
parent 02c98a0526
commit 2d6703e45b
4 changed files with 22 additions and 23 deletions

View File

@ -1,6 +1,6 @@
import axios from 'axios'
export default class CarService {
export default class CustomerService {
getCustomersSmall() {
return axios.get('demo/data/customers-small.json').then(res => res.data.data);

View File

@ -119,7 +119,6 @@ export default {
sales: null
}
},
carService: null,
created() {
this.sales = [
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
@ -172,7 +171,6 @@ export default {
sales: null
}
},
carService: null,
created() {
this.sales = [
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},

View File

@ -21,11 +21,11 @@
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>
</div>
@ -34,26 +34,27 @@
<DeferredContentDoc />
</div>
</template>
<script>
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
import DeferredContentDoc from './DeferredContentDoc';
export default {
data() {
return {
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
methods: {
onImageLoad() {
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
},
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'});
}
},

View File

@ -85,35 +85,35 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/div&gt;
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
methods: {
onImageLoad() {
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
},
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'});
}
}