Skip to content

Commit 9de3d14

Browse files
liborpanskyliborpansky
committed
Implement TS FetchData component also with Vue.extend
1 parent d721b84 commit 9de3d14

File tree

2 files changed

+143
-51
lines changed

2 files changed

+143
-51
lines changed

‎ClientApp/src/views/FetchData-decorator.vue

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<v-container fluid>
3+
<v-slide-y-transition mode="out-in">
4+
<v-row>
5+
<v-col>
6+
<h1>Weather forecast</h1>
7+
<p>This component demonstrates fetching data from the server.</p>
8+
9+
<v-data-table
10+
:headers="headers"
11+
:items="forecasts"
12+
hide-default-footer
13+
:loading="loading"
14+
class="elevation-1"
15+
>
16+
<v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
17+
<template v-slot:item.date="{ item }">
18+
<td>{{ item.date | date }}</td>
19+
</template>
20+
<template v-slot:item.temperatureC="{ item }">
21+
<v-chip :color="getColor(item.temperatureC)" dark>{{ item.temperatureC }}</v-chip>
22+
</template>
23+
</v-data-table>
24+
</v-col>
25+
</v-row>
26+
</v-slide-y-transition>
27+
28+
<v-alert
29+
:value="showError"
30+
type="error"
31+
v-text="errorMessage"
32+
>
33+
This is an error alert.
34+
</v-alert>
35+
36+
<v-alert
37+
:value="showError"
38+
type="warning"
39+
>
40+
Are you sure you're using ASP.NET Core endpoint? (default at <a href="http://localhost:5000/fetch-data">http://localhost:5000</a>)<br>
41+
API call would fail with status code 404 when calling from Vue app (default at <a href="http://localhost:8080/fetch-data">http://localhost:8080</a>) without devServer proxy settings in vue.config.js file.
42+
</v-alert>
43+
44+
</v-container>
45+
</template>
46+
47+
<script lang="ts">
48+
// an example of a Vue Typescript component using vue-property-decorator
49+
import { Component, Vue } from 'vue-property-decorator';
50+
import { Forecast } from '../models/Forecast';
51+
import axios from 'axios';
52+
53+
@Component({})
54+
export default class FetchDataView extends Vue {
55+
private loading: boolean = true;
56+
private showError: boolean = false;
57+
private errorMessage: string = 'Error while loading weather forecast.';
58+
private forecasts: Forecast[] = [];
59+
private headers = [
60+
{ text: 'Date', value: 'date' },
61+
{ text: 'Temp. (C)', value: 'temperatureC' },
62+
{ text: 'Temp. (F)', value: 'temperatureF' },
63+
{ text: 'Summary', value: 'summary' },
64+
];
65+
66+
private getColor(temperature: number) {
67+
if (temperature < 0) {
68+
return 'blue';
69+
} else if (temperature >= 0 && temperature < 30) {
70+
return 'green';
71+
} else {
72+
return 'red';
73+
}
74+
}
75+
private async created() {
76+
await this.fetchWeatherForecasts();
77+
}
78+
79+
private async fetchWeatherForecasts() {
80+
try {
81+
const response = await axios.get<Forecast[]>('api/WeatherForecast');
82+
this.forecasts = response.data;
83+
} catch (e) {
84+
this.showError = true;
85+
this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
86+
}
87+
this.loading = false;
88+
}
89+
}
90+
</script>

‎ClientApp/src/views/FetchData.vue

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -25,65 +25,67 @@
2525
</v-row>
2626
</v-slide-y-transition>
2727

28-
<v-alert
29-
:value="showError"
30-
type="error"
31-
v-text="errorMessage"
32-
>
28+
<v-alert :value="showError" type="error" v-text="errorMessage">
3329
This is an error alert.
3430
</v-alert>
35-
36-
<v-alert
37-
:value="showError"
38-
type="warning"
39-
>
40-
Are you sure you're using ASP.NET Core endpoint? (default at <a href="http://localhost:5000/fetch-data">http://localhost:5000</a>)<br>
41-
API call would fail with status code 404 when calling from Vue app (default at <a href="http://localhost:8080/fetch-data">http://localhost:8080</a>) without devServer proxy settings in vue.config.js file.
42-
</v-alert>
43-
31+
32+
<v-alert :value="showError" type="warning">
33+
Are you sure you're using ASP.NET Core endpoint? (default at
34+
<a href="http://localhost:5000/fetch-data">http://localhost:5000</a
35+
>)
36+
<br />
37+
API call would fail with status code 404 when calling from Vue app
38+
(default at
39+
<a href="http://localhost:8080/fetch-data">http://localhost:8080</a>)
40+
without devServer proxy settings in vue.config.js file.
41+
</v-alert>
4442
</v-container>
4543
</template>
4644

4745
<script lang="ts">
48-
import { Component, Vue } from 'vue-property-decorator';
46+
// an example of a Vue Typescript component using Vue.extend
47+
import Vue from 'vue';
4948
import { Forecast } from '../models/Forecast';
5049
import axios from 'axios';
5150
52-
@Component({})
53-
export default class FetchDataView extends Vue {
54-
private loading: boolean = true;
55-
private showError: boolean = false;
56-
private errorMessage: string = 'Error while loading weather forecast.';
57-
private forecasts: Forecast[] = [];
58-
private headers = [
59-
{ text: 'Date', value: 'date' },
60-
{ text: 'Temp. (C)', value: 'temperatureC' },
61-
{ text: 'Temp. (F)', value: 'temperatureF' },
62-
{ text: 'Summary', value: 'summary' },
63-
];
64-
65-
private getColor(temperature: number) {
66-
if (temperature < 0) {
67-
return 'blue';
68-
} else if (temperature >= 0 && temperature < 30) {
69-
return 'green';
70-
} else {
71-
return 'red';
72-
}
73-
}
74-
private async created() {
51+
export default Vue.extend({
52+
data() {
53+
return {
54+
loading: true,
55+
showError: false,
56+
errorMessage: 'Error while loading weather forecast.',
57+
forecasts: [] as Forecast[],
58+
headers: [
59+
{ text: 'Date', value: 'date' },
60+
{ text: 'Temp. (C)', value: 'temperatureC' },
61+
{ text: 'Temp. (F)', value: 'temperatureF' },
62+
{ text: 'Summary', value: 'summary' },
63+
],
64+
};
65+
},
66+
methods: {
67+
getColor(temperature: number) {
68+
if (temperature < 0) {
69+
return 'blue';
70+
} else if (temperature >= 0 && temperature < 30) {
71+
return 'green';
72+
} else {
73+
return 'red';
74+
}
75+
},
76+
async fetchWeatherForecasts() {
77+
try {
78+
const response = await axios.get<Forecast[]>('api/WeatherForecast');
79+
this.forecasts = response.data;
80+
} catch (e) {
81+
this.showError = true;
82+
this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
83+
}
84+
this.loading = false;
85+
},
86+
},
87+
async created() {
7588
await this.fetchWeatherForecasts();
76-
}
77-
78-
private async fetchWeatherForecasts() {
79-
try {
80-
const response = await axios.get<Forecast[]>('api/WeatherForecast');
81-
this.forecasts = response.data;
82-
} catch (e) {
83-
this.showError = true;
84-
this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
85-
}
86-
this.loading = false;
87-
}
88-
}
89+
},
90+
});
8991
</script>

0 commit comments

Comments
 (0)