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' 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);

View File

@ -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},

View File

@ -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'});
} }
}, },

View File

@ -85,35 +85,35 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/div&gt; &lt;/div&gt;
&lt;DeferredContent @load="onDataLoad"&gt; &lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="products"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</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'});
} }
} }