Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9de3d14

Browse files
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
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)

AltStyle によって変換されたページ (->オリジナル) /