MAD 2 Quiz 2 3 Aug 2025 — Question 15

1const Home = {
2      template: `
3        <div>
4          <h2>Home Page</h2>
5          <p v-if="loading">Loading data...</p>
6          <p v-show="!loading">{{ message }}</p>
7          <button @click="fetchData">Fetch</button>
8        </div>
9      `,
10      data() {
11        return {
12          message: '',
13          loading: false
14        };
15      },
16      methods: {
17        async fetchData() {
18          this.loading = true;
19          await this.simulateApiCall().then((res) => {
20            this.message = res;
21            this.loading = false;
22          });
23        },
24        simulateApiCall() {
25          return new Promise((resolve) => {
26
27            setTimeout(() => resolve("Fetched Data from API!"), 1000);
28          });
29        }
30      }
31    };
32    const About = {
33      template: '<div><h2>About Page</h2></div>'
34    };
35    const router = new VueRouter({
36      routes: [
37        { path: '/home', component: Home },
38        { path: '/about', component: About }
39      ]
40});
41
42new Vue({
43  el: '#app',
44  router
45});