Consider the following Vue app with markup index.html and JavaScript app.js. index.html app.js const Dashboard = { template: This is dashboard for {{user.name}} , props: ['id'], data() { return { users: [ { id: 1, name: 'User1' }, { id: 2, name: 'User2' }, { id: 3, name: 'User3' }, ], } }, computed: { user() { const user = this.users.find((user) => user.id == this.id) if (user) { return user } else { return this.users[2] } }, }, } const router = new VueRouter({ routes: [{ path: '/dashboard/:id', component: Dashboard, props: true }], }) new Vue({ el: '#app', template: , router, }) Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of root component for the URL “http://localhost:8080/dashboard/1” ?

(A) This is dashboard for User1

(B) This is dashboard for User2

(C) This is dashboard for User3

Modern Application Development II · Quiz 2 · 3 Dec 2023 · September 2023 term

Question 10: Consider the following Vue app with markup index.html an…

Question 10

+4.5 marksOne correct option

Consider the following Vue app with markup index.html and JavaScript app.js.

index.html

html

1<body>
2   <div id="app"></div>
3</body>

app.js

javascript

1const Dashboard = {
2  template: `<div> This is dashboard for {{user.name}} </div>`,
3  props: ['id'],
4  data() {
5    return {
6      users: [
7        { id: 1, name: 'User1' },
8        { id: 2, name: 'User2' },
9        { id: 3, name: 'User3' },
10      ],
11    }
12  },
13  computed: {
14    user() {
15      const user = this.users.find((user) => user.id == this.id)
16      if (user) {
17        return user
18      } else {
19        return this.users[2]
20      }
21    },
22  },
23}
24
25const router = new VueRouter({
26  routes: [{ path: '/dashboard/:id', component: Dashboard, props:
27true }],
28})
29new Vue({
30  el: '#app',
31  template: `<router-view />`,
32  router,
33})

Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of root component for the URL “http://localhost:8080/dashboard/1” ?

A
This is dashboard for User1
B
This is dashboard for User2
C
This is dashboard for User3
D
None of these

Show answer

Correct answer

A
This is dashboard for User1

See the whole paper Take it as a mock test

Question 10 of 16 in the IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 3 Dec 2023, in the September 2023 term (IIT M DIPLOMA AN2 EXAM QDD2 03 Dec 2023). It carries 4.5 marks.

Question 10: Consider the following Vue app with markup index.html an…

Question 10

More questions from this paper