Consider the below application with markup “index.html” and javascript file “app.js”. index.html: app.js: const overs = { 1: [2, 3, 4, 6, 2], 2: [3, 2, 5, 3, 1], } const NotFound = { template: Over Not Found } const MatchNotStarted = { template: Match has not yet started. } const currentOver = { template: {{run}} , data() { return { over: overs[this.route.params.overNo] ? overs[this.route.params.overNo] : overs[2], } }, } const liveScore = { template: Total Score:{{totalScore}} , data() { return { totalScore: 100, } }, } const router = new VueRouter({ routes: [ { path: '/live-score', component: liveScore, children: [ { path: '', component: MatchNotStarted }, { path: 'over/:overNo', component: currentOver }, ], }, ], }) new Vue({ el: '#app', template: , router, }) Suppose the application is running on “http://127.0.0.1:8080”. What will be rendered in the “router-view” component of the “live-score” component for URL “http://localhost:8080/#/live-score/over/2”?

Modern Application Development II · End Term · 30 Apr 2023 · January 2023 term · Set QPD1-S2

Question 15: Consider the below application with markup “index.html” …

Question 15

+3 marksOne correct option

Consider the below application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<body>
2    <div id="app"></div>
3    <script
4src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
5    <script
6src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
7    <script src="app.js" type="module"></script>
8  </body>

app.js:

javascript

1const overs = {
2  1: [2, 3, 4, 6, 2],
3  2: [3, 2, 5, 3, 1],
4}
5
6const NotFound = { template: `<div> Over Not Found</div>` }
7const MatchNotStarted = { template: `<div>Match has not yet started.
8</div>` }
9
10const currentOver = {
11  template: `<div style='display: flex'>
12<div v-for='run in over' style='padding: 10px'>{{run}}</div>
13</div>`,
14  data() {
15    return {
16      over: overs[this.$route.params.overNo]
17        ? overs[this.$route.params.overNo]
18        : overs[2],
19    }
20  },
21}
22
23const liveScore = {
24  template: `<div>Total Score:{{totalScore}} <router-view /></div>`,
25  data() {
26    return {
27      totalScore: 100,
28    }
29  },
30}
31
32const router = new VueRouter({
33  routes: [
34    {
35      path: '/live-score',
36      component: liveScore,
37      children: [
38        { path: '', component: MatchNotStarted },
39        { path: 'over/:overNo', component: currentOver },
40      ],
41    },
42  ],
43})
44
45new Vue({
46  el: '#app',
47  template: `<div><router-view /></div>`,
48  router,
49})

Suppose the application is running on “http://127.0.0.1:8080”. What will be rendered in the “router-view” component of the “live-score” component for URL “http://localhost:8080/#/live-score/over/2”?

A
Total Score:100
B
Match has not yet started.
C
2 3 4 6 2
D
3 2 5 3 1

Show answer

Correct answer

D
3 2 5 3 1

See the whole paper Take it as a mock test

Question 15 of 32 in the IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 30 Apr 2023, in the January 2023 term (IIT M DIPLOMA ET1 EXAM QPD1 S2 30 Apr 2023). It carries 3 marks.

Question 15: Consider the below application with markup “index.html” …

Question 15

More questions from this paper