Home / MAD2 / Week 4 / Real questions

MAD2 week 4 - real exam questions

60 questions pulled from past papers whose wording matches this week's topics, newest first, duplicates removed. Pick your answers, then press Check answers. Figures and answer keys are the originals.

Elapsed 00:00

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 1MCQ4.5 marks

Consider the following

and JavaScript

for a Vue application: File: index.html question figure

File: app.js question figure

Suppose the application is running on

, and the user visits the URL:

What will be rendered by the browser? [NOTE:

is divided in two images, consider them as one file content.] question figure

Text of the picture (copyable)

index.html
app.js
```html
<div id="app">
  <router-view></router-view>
</div>
```
```javascript
const Flights = {
  template: `<h2>{{ result }}</h2>`,

  data() {
    return {
      routes: [
        { city: "Delhi", connectedTo: ["Mumbai", "Pune"] },
        { city: "Indore", connectedTo: ["Bhopal", "Jaipur"] },
        { city: "Raipur", connectedTo: ["Nagpur", "Hyderabad"] },
        { city: "Rewa", connectedTo: ["Delhi", "Indore", "Raipur"] }
      ],
      result: ""
    };
  },

  created() {
    const destination = this.$route.params.city.toLowerCase();

    for (let i = 0; i < this.routes.length; i++) {
      const connections = this.routes[i].connectedTo;

      for (let j = 0; j < connections.length; j++) {
        if (connections[j].toLowerCase() === destination) {
          this.result = this.routes[i].city;
          break;
        }
      }

      if (this.result) {
        break;
      }
    }
  }
};
```
```
http://localhost:8080
```
```
http://localhost:8080/#/raipur
```
app.js
```javascript
const router = new VueRouter({
  routes: [
    {
      path: "/:city",
      component: Flights
    }
  ]
});

new Vue({
  el: "#app",
  router
});
```

Delhi
Indore
Raipur
Rewa

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 2MCQ4.5 marks

Consider the following Vuex store: question figure

The

getter is used in a Vue component as shown below: question figure

Now suppose the Vuex getter

is removed, while the temperature state continues to be updated through Vuex mutations. Which of the following implementations correctly recreates

in the component so that it automatically reacts whenever the Vuex

changes?

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: {
    temperature: 30
  },
  getters: {
    weatherStatus(state) {
      return state.temperature >= 35 ? "Hot" : "Normal"
    }
  }
})
```
weatherStatus
```javascript
computed: {
  weatherStatus() {
    return this.$store.getters.weatherStatus
  }
}
```
weatherStatus
weatherStatus
temperature

text

```javascript
computed: {
  weatherStatus() {
    return this.$store.state.temperature >= 35
      ? "Hot"
      : "Normal"
  }
}
```

text

```javascript
watch: {
  weatherStatus() {
    return this.$store.state.temperature >= 35
      ? "Hot"
      : "Normal"
  }
}
```

text

```javascript
methods: {
  weatherStatus() {
    this.$store.state.temperature >= 35
      ? "Hot"
      : "Normal"
  }
}
```

text

```javascript
watch: {
  weatherStatus() {
    return this.$store.state.temperature >= 35
  }
}
```

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 3MCQ3 marks

Match the testing concept in Column I with the most appropriate description in Column II. question figure

Text of the picture (copyable)

| Column I | Column II |
| :------- | :-------- |
| 1. Unit Testing | A. Testing application behaviour across different browsers |
| 2. E2E Testing | B. Commonly used for writing and running tests |
| 3. Cross-Browser Testing | C. Testing individual Vue components independently |
| 4. Jest / Mocha / Chai | D. Testing a complete application flow including backend interaction |

1-C, 2-B, 3-A, 4-D
1-B, 2-C, 3-D, 4-A
1-A, 2-D, 3-B, 4-C
1-C, 2-D, 3-A, 4-B

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 4MCQ3 marks

A developer has just created a new Vue 2 project using Vue CLI and the following package.json was generated. package.json question figure

The developer wants to view the app in the browser locally for development. They run the following command: bash:

Which of the following best describes what happens and what the developer should have run instead?

Text of the picture (copyable)

```json
{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0",
    "babel-eslint": "^10.1.0"
  }
}
```
```
npm run build
```

launches the app on ; the developer should have run npm start to compile for production instead.
text
```
```
npm run build
```
```
localhost:8080
```
```

and

do the same thing — both launch the app at

text

```
npm run build
```
```
npm run serve
```
```
localhost:8080
```

is correct for local development; is only used for deploying to a server.
text
```
```
npm run build
```
```
npm run serve
```
```
compiles and bundles the app for production into a folder — it does not start a local server. The developer should have run instead.
text
```
```
npm run build
```
/dist
```
npm run serve
```
```

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 5MCQ3 marks

Match each Vue directive with its correct description: question figure

Text of the picture (copyable)

| Directive | Description |
|---|---|
| 1. v-if | A. Two-way binding between input and data |
| 2. v-for | B. Conditionally renders DOM elements |
| 3. v-bind | C. Binds HTML attributes dynamically |
| 4. v-model | D. Renders a list of items |

1–A, 2–D, 3–C, 4–B
1–D, 2–B, 3–C, 4–A
1–B, 2–D, 3–C, 4–A
1–B, 2–C, 3–D, 4–A

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 6MCQ2 marks

Comprehension passage for this question

Read the following Vue 2 component code carefully (using the Options API via CDN) and answer the given sub questions. question figure

is accessed three times in a row in the template without price or discount changing in between, how many times does

get logged?

Text of the picture (copyable)

discountedPrice
"computing..."

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 7MSQ4.5 marksselect all that apply

Read the following component code carefully. file: script.js question figure

file:index.html question figure

Select all statements that correctly describe the console output:

Text of the picture (copyable)

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  },
  beforeCreate() {
    console.log("1:", this.message);
  },
  created() {
    console.log("2:", this.message);
  },
  beforeMount() {
    console.log("3:", this.$el.textContent);
  },
  mounted() {
    console.log("4:", this.$el.textContent);
  }
});
```
```html
<div id="app">{{ message }}</div>
```

Log 1: prints
text
```
undefined
```
Log 2: prints
text
```
hello
```
Log 3: prints
text
```
hello
```
Log 4: prints
text
```
hello
```
Log 3: throws an error because $el is not yet available

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 8MSQ4.5 marksselect all that apply

A Vue 2 application fetches a list of courses from an API and wants to display them in the template. question figure

Assume the API returns: question figure

Complete the missing code so that all course names are rendered correctly. Which of the following code snippets can correctly replace

Text of the picture (copyable)

```html
<div id="app">
  <ul>
    <!-- Missing Code -->
  </ul>
</div>

<script>
  new Vue({
    el: '#app',

    data: {
      courses: []
    },

    async mounted() {
      const response = await fetch('https://example.com/api/courses')
      this.courses = await response.json()
    }
  })
</script>
```
```json
[
  { "id": 1, "name": "MAD-2" },
  { "id": 2, "name": "DBMS" }
]
```
```html
<!-- Missing Code -->
```

text

```html
<li v-for="course in courses" :key="course.id">
  {{ course.name }}
</li>
```

text

```html
<li v-for="(course, index) in courses" :key="index">
  {{ course.name }}
</li>
```

text

```html
<li v-if="course in courses">
  {{ course.name }}
</li>
```

text

```html
<li v-for="courses in course">
  {{ courses.name }}
</li>
```

MAD2 End Term · 13 Sep 2026 · open the full paper

Practice 9MCQ3 marks

Comprehension passage for this question

Consider the following Vue 2 + Vuex application: question figure

Note: All three image above are of one html. Based on the above data, answer the given subquestions. question figure

Why does the watcher on temperature execute after clicking the button?

Because Vue automatically watches all methods
Because the Vuex mutation changes the state used by the computed property
Because getters directly trigger watchers
Because computed properties cannot access Vuex state

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 10MSQ3 marksselect all that apply

Suppose the following HTML exists: question figure

Which of the following statements are correct?

Text of the picture (copyable)

```html
<div class="card" data-price="499">
    <span id="title">Vue Book</span>
</div>
```

returns

text

```javascript
document.querySelector(".card").dataset.price
```
"499"

converts the value to numeric

text

```javascript
Number(document.querySelector(".card").dataset.price)
```
499

can read the visible text

text

```javascript
document.getElementById("title").innerText
```
"Vue Book"

returns a single element, not a collection.

text

```javascript
document.querySelectorAll(".card")
```

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 11MSQ3 marksselect all that apply

A Vue frontend, a mobile app, and another backend service all call the same Flask API deployed on multiple servers. The team chooses JWT authentication. Which of the following statements are correct?

Each request can carry the token, so any server can validate it without storing a per-user session in memory.
JWT is API-friendly because clients can send it using the header.
text
```
```
Authorization: Bearer <token>
```
```
In Flask-JWT-Extended, can read the identity stored in the token.
text
```
```
get_jwt_identity()
```
```
Session-based authentication is usually easier to scale across multiple servers because no shared storage is needed. The team should have chosen this.

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 12MSQ4.5 marksselect all that apply

A Vue 2 component does the following: •loads initial task data from an API, •starts a timer after the component appears on the page, •clears that timer before the component is removed. Which hook choices are appropriate?

for loading initial data.
text
```
```
created()
```
```
for starting DOM-related work or timers.
text
```
```
mounted()
```
```
for cleanup.
text
```
```
beforeDestroy()
```
```
for declaring reactive .
text
```
```
destroyed()
```
data
```

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 13MSQ2 marksselect all that apply

In a Vue Router app, a developer uses: •

inside a parent route, •

, •

inside a method. Which statements are correct?

Text of the picture (copyable)

children
```
{ path: '*', component: NotFound }
```
```javascript
this.$router.go(-1)
```

can be used to organize nested routes under a parent route.
text
```
children
```
can act as a fallback for unknown routes.
text
```
*
```
tries to go back one step in browser history.
text
```
```javascript
this.$router.go(-1)
```
```
Vue Router removes the need for route components.

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 14MCQ4.5 marks

Fill in Code1, inside a mutation handler, which can be used to reduce the price of each of the products in the state by a certain discount. app.js: question figure

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: {
    discount: 10,
    products: [
      {name: 'apple',
        price: 120
      },
      {
        name: 'banana',
        price: 60
      }
    ]
  },
  mutations: {
    reducePrice: state=>{
      // Code1
    }
  }
})
```

text

```javascript
this.$store.state.products.forEach(product => { product.price -= (state.discount)/100*product.price; })
```

text

```javascript
state.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```

text

```javascript
commit.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```

text

```javascript
dispatch.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 15MCQ4.5 marks

Consider the following Vuex store and component code. store.js question figure

Component.vue question figure

After triggering all three methods (

and

) one by one, which of the following statements is correct?

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    ADD_TO_CART(state, product) {
      state.cart.push(product)
    }
  },
  actions: {
    addToCart({ commit }, product) {
      setTimeout(() => {
        commit('ADD_TO_CART', product)
      }, 500)
    }
  }
})
```
```javascript
methods: {
  addItem_A(product) {
    this.$store.commit('ADD_TO_CART', product)
  },
  addItem_B(product) {
    this.$store.dispatch('addToCart', product)
  },
  addItem_C(product) {
    this.$store.state.cart.push(product)
  }
}
```
addItem_A
addItem_B
addItem_C

All three methods will update the cart and all changes will be visible in Vue DevTools mutation history.
Only and will appear in Vue DevTools mutation history, but will appear with a delay.
text
```
addItem_A
addItem_B
addItem_B
```
Only will update the cart because mutations cannot be called directly from components.
text
```
addItem_B
```
will throw an error because Vuex prevents direct state modification.
text
```
addItem_C
```

MAD2 Quiz 2 · 16 Aug 2026 · open the full paper

Practice 16MCQ4.5 marks

Read the following component carefully. question figure

What will be logged in the console when this component first loads?

Text of the picture (copyable)

```html
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  beforeCreate() {
    console.log("A:", this.message);
  },
  created() {
    console.log("B:", this.message);
    this.message = "Hello from Vue!";
  },
  mounted() {
    console.log("C:", document.querySelector("p").textContent);
  }
};
</script>
```

text

A: "" → B: Hello from Vue! → C: Hello from Vue!

text

A: undefined -> B: Hello from Vue! -> C: Hello from Vue!

text

A: undefined → B: "" → C: Hello from Vue!

text

A: undefined → B: undefined → C: Hello from Vue!

text
```
A: "" -> B: "" -> C: Hello from Vue!
```

MAD2 Quiz 1 · 19 Jul 2026 · open the full paper

Practice 17MSQ2 marksselect all that apply

Which of the following are advantages of component-based frontend frameworks like Vue.js?

Code reusability
Better maintainability
Automatic SQL query optimization
Easier UI management

MAD2 Quiz 1 · 19 Jul 2026 · open the full paper

Practice 18MCQ3 marks

A child component is initially visible using

. The parent first updates a prop passed to the child, and then sets

. After the child has already mounted once, which sequence can occur in the child after initial render?

Text of the picture (copyable)

```
v-if="show"
```
```
show = false
```

text

beforeUpdate
updated
beforeDestroy
destroyed

text

beforeDestroy
destroyed
beforeUpdate
updated

-> -> ->
text
```
created
mounted
beforeUpdate
destroyed
```
-> -> ->
text
```
updated
beforeCreate
destroyed
mounted
```

MAD2 Quiz 1 · 19 Jul 2026 · open the full paper

Practice 19MCQ2 marks

Which of the following Vue directives are correctly matched with their purpose?

v-show → fetching api
v-for → Iteration over lists
v-bind → Conditional rendering
v-model → Event handling only

MAD2 Quiz 1 · 19 Jul 2026 · open the full paper

Practice 20MSQ3 marksselect all that apply

Given the following parent-child setup in Vue 2: question figure

and inside the child: question figure

Which statements are correct?

Text of the picture (copyable)

```html
<child-box :message="parentMsg" @reply="handleReply"></child-box>
```
```javascript
this.$emit('reply', 'ok')
```

flows from parent to child through props.
text
```
message
```
is a custom event sent from child to parent.
text
```
reply
```
The child should directly change to update the parent source of truth.
text
```
message
```
If changes in the parent, the child can receive the updated prop value.
text
```
parentMsg
```

MAD2 Quiz 1 · 19 Jul 2026 · open the full paper

Practice 21MSQ3 marksselect all that apply

Identify the issue in the following Vue.js code: question figure

Why does the

value not update correctly when the button is clicked?

Text of the picture (copyable)

```html
<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Click</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello"
    },
    methods: {
      changeMessage: () => {
        this.message = "Updated"
      }
    }
  })
</script>
```
message

should be used instead of
text
```
v-on
```
@click
```
```
Arrow functions do not bind their own
text
```
this
```
should be a function in all Vue instances
text
```
data
```
Vue.js does not support external methods

MAD2 End Term · 10 May 2026 · open the full paper

Practice 22MCQ3 marks

Consider the below Vuex store configuration: question figure

If the addItemAsync action is dispatched with the item 'React', what will be the state of items after 2 seconds?

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: {
    items: ['Angular', 'Vue'],
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
  },

  actions: {
    addItemAsync({ commit }, item) {
      setTimeout(() => {
        commit('addItem', item);
      }, 500);
    },
  },
});
```

['Angular', 'Vue']
['Angular', 'Vue', 'React']
['React']
['Angular']

MAD2 End Term · 10 May 2026 · open the full paper

Practice 23MCQ3 marks

Consider the below Vue app. question figure

What happens when the user navigates to an undefined route like "/random"?

Text of the picture (copyable)

```html
<div id="app">
  <router-link to="/about">Go to About</router-link>
  <router-view></router-view>
</div>

<script>
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };

  const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '*', redirect: '/about' }
  ];

  const router = new VueRouter({ routes });

  new Vue({
    el: '#app',
    router
  });
</script>
```

Browser navigates to /random and shows a blank page.
Browser navigates to /random but renders nothing.
Browser redirects to /about and displays "About".
Error: No matching route.

MAD2 End Term · 10 May 2026 · open the full paper

Practice 24MCQ3 marks

Match the Vue directive in Directive with its correct functionality in Description using Vue.js. question figure

Text of the picture (copyable)

| Directive | Description |
|---|---|
| 1. v-if | A. Two-way data binding between input and data |
| 2. v-for | B. Conditionally renders elements in the DOM |
| 3. v-bind | C. Binds HTML attributes dynamically |
| 4. v-model | D. Renders a list of items |

1–A, 2–D, 3–C, 4–B
1–D, 2–B, 3–C, 4–A
1–B, 2–C, 3–D, 4–A
1–B, 2–D, 3–C, 4–A

MAD2 End Term · 10 May 2026 · open the full paper

Practice 25MCQ4.5 marks

Consider the following Vue application with markup index.html and JavaScript file app.js. question figure

Suppose the application is running on http://127.0.0.1:8080. What will be rendered by the browser?

Text of the picture (copyable)

File: index.html

```html
<div id="app"></div>
<script src="script.js"></script>
```

File: script.js

```javascript
new Vue({
  el: '#app',
  template: `<div>
    Status: {{status}}<br>
    Value: {{value}}
  </div>`,
  data: {
    status: "Initial",
    value: 10,
  },
  beforeCreate() {
    this.status = this.status + " -> Created"
    this.value = this.value + 5
  },
  beforeMount() {
    this.status = this.status + " -> Ready"
    this.value = this.value - 2
  },
  created() {
    this.status = this.status + " -> Mounted"
    this.value = this.value * 2
  },
  mounted() {
    this.status = this.status + " -> Done"
    this.value = this.value / 2
  },
})
```

Status: Initial -> Created -> Ready -> Mounted -> Done Value: 13
Status: Initial -> Ready -> Mounted -> Done Value: 8
Status: Initial -> Created -> Mounted -> Ready -> Done Value: 14
Status: Initial -> Mounted -> Ready -> Done Value: 9

MAD2 End Term · 10 May 2026 · open the full paper

Practice 26MCQ4.5 marks

Consider the following endpoints created with a working setup of flask-security and flask-sqlalchemy. question figure

Three requests are made to this application: GET /api/open (no authentication headers)1. GET /api/secure (no authentication headers)2. GET /api/superuser with valid authentication token but user has role 'basic' (not 'superuser')3. What will be the response status codes for these requests, respectively?

Text of the picture (copyable)

```python
@app.route('/api/open')
def open_endpoint():
    return jsonify({'message': 'Open access', 'status': 'success'})

@app.route('/api/secure')
@auth_required('token')
def secure_endpoint():
    return jsonify({'message': 'Secure access', 'status': 'authenticated'})

@app.route('/api/superuser')
@auth_required('token')
@roles_required('superuser')
def superuser_endpoint():
    return jsonify({'message': 'Superuser access', 'status': 'authorized'})
```

200, 200, 200
200, 401, 403
200, 403, 401
401, 403, 403

MAD2 End Term · 10 May 2026 · open the full paper

Practice 27MCQ4.5 marks

A student is going on a trip and wants to check whether all essential items are packed. The application uses Vue 2 and Vuex to manage the list of packed items.The following Vue application is incomplete. Two lines of code are missing and are marked as Line X and Line Y. question figure

Which of the following options correctly fills Line X and Line Y so that the application works as expected?

Text of the picture (copyable)

```html
<div id="app">
  <h3>Trip Essentials</h3>

  <ul>
    <li v-for="item in packedItems" :key="item">
      {{ item }}
    </li>
  </ul>

  <button @click="packItem('Passport')">Pack Passport</button>
</div>

<script>
  const store = new Vuex.Store({
    state: {
      packed: []
    },
    mutations: {
      ADD_ITEM(state, item) {
        state.packed.push(item);
      }
    }
  });

  new Vue({
    el: "#app",
    store,
    computed: {
      /* Line X */
    },
    methods: {
      packItem(item) {
        /* Line Y */
      }
    }
  });
</script>
```

text

```javascript
// Line X
packedItems() {
  return this.store.state.packed;
}

// Line Y
this.store.commit("ADD_ITEM", item);
```

text

```javascript
// Line X
packedItems() {
  return this.$store.state.packed;
}

// Line Y
this.$store.commit("ADD_ITEM", item);
```

text

```javascript
// Line X
packedItems() {
  return this.$store.packed;
}

// Line Y
this.commit("ADD_ITEM", item);
```

text

```javascript
// Line X
packedItems: this.$store.state.packed

// Line Y
this.$store.dispatch("ADD_ITEM", item);
```

MAD2 End Term · 10 May 2026 · open the full paper

Practice 28MSQ3 marksselect all that apply

Which of the following statement(s) is/are true about GraphQL?

Mutations in GraphQL can be used to change the underlying data store.
GraphQL services are created by defining types and fields of those types, then providing functions for each field.
GraphQL can only fetch data from a single source.
GraphQL allows only GET operations.

MAD2 End Term · 10 May 2026 · open the full paper

Practice 29MSQ3 marksselect all that apply

Prerna and Swathy are using a web application built with Vue.js for the BS Degree program. When the page loads, the sidebar content appears instantly• However, when they click on an Assignments link, the main content takes noticeable time to load • A simplified version of the component is shown below: question figure

Which of the following statements correctly explain why the Assignments page takes time to load?

Text of the picture (copyable)

```javascript
export default {
  data() {
    return {
      assignments: []
    }
  },
  created() {
    fetch("/api/assignments")
      .then(res => res.json())
      .then(data => {
        this.assignments = data;
      });
  }
}
```

The sidebar is likely part of a parent component and is already rendered before the API call
The Assignments component waits for the API response before displaying data
Vue blocks rendering of all components until API calls complete
The delay is caused because data is fetched asynchronously after the component is created

MAD2 End Term · 10 May 2026 · open the full paper

Practice 30MCQ3 marks

Comprehension passage for this question

Consider the following Vue.js application: question figure

Based on the above data, answer the given subquestions.

How many times will "computed run" be logged in the console during the initial render?

0
1
Multiple times due to the loop
Depends on user interaction

MAD2 End Term · 10 May 2026 · open the full paper

Practice 31MCQ3 marks

Comprehension passage for this question

Consider the following Vue.js application: question figure

Based on the above data, answer the given subquestions.

If the

method is modified as follows: question figure

What will happen when the button is clicked?

Text of the picture (copyable)

```
calculate()
```
```
calculate() {
  this.a = this.a + 1;
}
```

will not run again
text
```
```
bigNumber()
```
```
will run again because a dependency changed
text
```
```
bigNumber()
```
```
Only time will update
Vue will throw an error

MAD2 End Term · 10 May 2026 · open the full paper

Practice 32MCQ3 marks

Comprehension passage for this question

Consider the following Vue.js application: question figure

Based on the above data, answer the given subquestions.

Why is

defined as a computed property instead of a method?

Text of the picture (copyable)

```
bigNumber()
```

Computed properties are always faster than methods
Methods cannot access data properties
Computed properties are cached based on their dependencies
Computed properties run only once

MAD2 End Term · 10 May 2026 · open the full paper

Practice 33MCQ4.5 marks

Comprehension passage for this question

Consider the following Vue 2 application: question figure

Assume the Vue application is loaded at the url

. The user then clicks on the Item 2 router link. Based on the above data, answer the given subquestions.

What happens immediately after clicking "Item 2"?

The Item component is destroyed and recreated, so is never called
text
```
```
updated()
```
```
The route changes, the component is reused, and is called
text
```
```
updated()
```
```
The route changes, but neither watcher nor lifecycle hooks run
A new Vue instance is created for the route

MAD2 End Term · 10 May 2026 · open the full paper

Practice 34MCQ4.5 marks

Comprehension passage for this question

Consider the following Vue 2 application: question figure

Assume the Vue application is loaded at the url

. The user then clicks on the Item 2 router link. Based on the above data, answer the given subquestions.

Why is the

lifecycle hook triggered in this scenario?

Text of the picture (copyable)

```
updated()
```

Because Vue Router always recreates components on navigation
Because lifecycle hooks run on every URL change regardless of reactivity
Because router-view forces a full re-render of the component tree
Because a watched route parameter updates parent reactive state, triggering a component update

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 35MCQ3 marks

Consider the following Vue.js code. question figure

What will be printed on the console first?

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: { todos: [] },
  mutations: {
    addTodo(state, todo) { state.todos.push(todo) }
  },
  actions: {
    async addTodoAsync({ commit }, todo) {
      commit('addTodo', { text: todo, done: false });
      return 'done';
    }
  }
});

store.dispatch('addTodoAsync', 'Learn Vuex')
  .then(msg => console.log(msg));

console.log(store.state.todos.length);
```

0
done
1
Error

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 36MCQ3 marks

Consider the following Vue.js application with two different route scenarios and a component that uses reactive data binding: Scenario: An e-commerce application where: Product list component displays products filtered by category• Category changes through router parameters: /products/:category• When a user navigates from /products/electronics to /products/books, the product list should update • Component Code: question figure

If the developer changed the template to use displayedProducts instead of filteredProducts, What would be the most likely issue?

Text of the picture (copyable)

```javascript
const ProductList = {
  template: `<div>{{ filteredProducts }}</div>`,
  data() {
    return {
      allProducts: [
        { id: 1, name: 'Laptop', category: 'electronics' },
        { id: 2, name: 'Novel', category: 'books' },
        { id: 3, name: 'Phone', category: 'electronics' }
      ],
      displayedProducts: null
    }
  },
  computed: {
    filteredProducts() {
      return this.allProducts.filter(p => p.category ===
        this.$route.params.category);
    }
  },
  watch: {
    '$route.params.category': function(newCategory) {
      this.displayedProducts = this.filteredProducts;
    }
  }
}
```

Performance would improve because computed properties are slower than data
The initial page load would show an empty list, and only after navigation would data appear correctly
There would be no difference because both will update at the same time
The application would crash because displayedProducts is reactive

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 37MCQ3 marks

Consider the following Vuex store setup for a user management system: question figure

Suppose the following mutation is committed:store.commit("updateUserStatus", { userId: 2, status: "active" });. Which of the following statements is TRUE after this mutation is executed?

Text of the picture (copyable)

```javascript
const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, name: 'Alice', status: 'active', role: 'admin' },
      { id: 2, name: 'Bob', status: 'inactive', role: 'user' },
      { id: 3, name: 'Charlie', status: 'active', role: 'user' }
    ]
  },
  getters: {
    activeUsers(state) {
      return state.users.filter(user => user.status === 'active');
    },
    activeUserCount(state, getters) {
      return getters.activeUsers.length;
    },
    adminUsers(state) {
      return state.users.filter(user => user.role === 'admin');
    }
  },
  mutations: {
    updateUserStatus(state, { userId, status }) {
      const user = state.users.find(u => u.id === userId);
      if (user) {
        user.status = status;
      }
    }
  }
});
```

will return 3
text
```
```
activeUserCount
```
```
will return two users
text
```
adminUsers
```
will include only Alice and Charlie
text
```
activeUsers
```
The mutation will not affect any getter output

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 38MCQ2 marks

In Vue 2 (CDN), which of the following correctly describes the timing of the beforeDestroy and destroyed lifecycle hooks?

beforeDestroy runs after the component has been removed from the DOM, while destroyed runs before destruction.
beforeDestroy runs just before the component is torn down and removed from the DOM, while destroyed runs after the component is fully destroyed.
beforeDestroy runs when the component is first mounted, while destroyed runs before the component is removed.
both hooks run only after the component is destroyed.

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 39MCQ4.5 marks

Consider the following markup index.html and JavaScript app.js for a Vue application. app.js: question figure

index.html: question figure

Suppose the application is running on http://localhost:8080, and the user visit the URL “http://localhost:8080/#/player/rohit/t20”. What will be rendered by the browser?

Text of the picture (copyable)

```javascript
const player = {
  template: `<div>
    <h1> Name: {{ name }}</h1>
    <router-view />
  </div>`,
  props: ['name'],
}

const test = {
  template: '<div><h1> Test Runs: {{ runs }} </h1></div>',
  data() {
    return { runs: 5000 }
  },
}

const oneDay = {
  template: '<div><h1> Oneday Runs: {{ runs }} </h1></div>',
  data() {
    return { runs: 10000 }
  },
}

const routes = [
  {
    path: '/player/:name',
    component: player,
    children: [
      { path: '', component: oneDay },
      { path: 'test', component: test },
      { path: 'oneday', component: oneDay },
    ],
    props: true,
  },
  { path: '*', component: test },
]
const router = new VueRouter({
  routes,
  base: '/',
})

const app = new Vue({
  el: '#app',
  router
})
```
```html
<div id="app">
  <router-view></router-view>
</div>
<script src="app.js"></script>
```

Name: Rohit Oneday Runs: 10000
Test Runs: 5000
Name: Rohit Test Runs: 5000
Oneday Runs: 10000

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 40MCQ4.5 marks

Consider the following html index.html and JavaScript app.js for a Vue application: File : index.html question figure

File : app.js question figure

Suppose the application is running on http://localhost:8080, and the user visits the URL http://localhost:8080/#/b. What will be rendered by the browser?

Text of the picture (copyable)

```html
<div id="app">
  <router-view></router-view>
</div>
```
```javascript
const Waterfall = {
  template: `<p>{{ result }}</p>`,
  data() {
    return {
      districts: [
        { district: "Satara", waterfall: "Vajrai Waterfall" },
        { district: "Shivamogga", waterfall: "Kunchikal Waterfalls" },
        { district: "South Goa", waterfall: "Dudhsagar Falls" },
        { district: "Rewa", waterfall: "Bahuti Falls" }
      ],
      result: ""
    };
  },
  created() {
    const letter = this.$route.params.alpha.toLowerCase();

    for (let i = 0; i < this.districts.length; i++) {
      if (this.districts[i].waterfall[0].toLowerCase() === letter) {
        this.result = this.districts[i].district;
        break;
      }
    }
  }
};

const router = new VueRouter({
  routes: [
    {
      path: "/:alpha",
      component: Waterfall
    }
  ]
});

new Vue({
  el: "#app",
  router
});
```

Shivamogga
South Goa
Rewa
Satara

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 41MSQ3 marksselect all that apply

Consider a scenario involving localStorage, Promise chains, and Vue lifecycle hooks: Scenario: A user authentication system where: On app initialization, the app checks localStorage for a stored user token• If a token exists, it validates the token asynchronously (via a Promise)• Based on validation, different UI components are rendered• The user navigates between different views• Code in mounted() hook: question figure

Which of the following statements is/are CORRECT about this implementation?

Text of the picture (copyable)

```javascript
mounted() {
  const storedToken = localStorage.getItem('userToken');
  if (storedToken) {
    this.validateToken(storedToken)
      .then(user => {
        this.user = user;
        this.isAuthenticated = true;
      })
      .catch(err => {
        localStorage.removeItem('userToken');
        this.isAuthenticated = false;
      });
  }
}
```

If the page is refreshed while the Promise is pending, the token will be lost because localStorage is cleared on refresh
If token validation fails, the token is removed from storage, preventing automatic login on future page loads
The isAuthenticated flag might be false even though a storedToken exists, until the Promise validation completes
sessionStorage should be used instead of localStorage because user tokens should not persist across browser sessions
If the user navigates to a different route while validation is pending, the Promise will still complete and update the user data

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 42MSQ3 marksselect all that apply

Consider the following Vue application: File: Index.html question figure

File: app.js question figure

The application consists of a parent component and a child component. When the button inside the child component is clicked, the parent’s message should update and display "Hello" in the browser. Two important lines are missing and marked as (Code1) and (Code2). Which of the following options correctly completes the code?

Text of the picture (copyable)

```html
<div id="app">
  <child-comp (Code1)></child-comp>
  <p>{{ message }}</p>
</div>
```
```javascript
Vue.component("child-comp", {
    template: `<button @click="send">Click</button>`,
    methods: {
        send() {
            (Code2)
        }
    }
});

new Vue({
    el: "#app",
    data: {
        message: "Waiting..."
    },
    methods: {
        updateMessage(msg) {
            this.message = msg;
        }
    }
});
```

text

```
(Code1) @message="updateMessage('Hello')"
(Code2) this.$emit("message")
```

text

```
(Code1) @message="updateMessage"
(Code2) this.$emit("message", "Hello")
```

text

```
(Code1) :message="updateMessage"
(Code2) this.emit("message", "Hello")
```

text

```
(Code1) @updateMessage="message"
(Code2) this.$emit("updateMessage")
```

MAD2 Quiz 2 · 12 Apr 2026 · open the full paper

Practice 43MSQ2 marksselect all that apply

Consider the following HTML index.html and JavaScript app.js for a Vue application: File: index.html question figure

File: app.js question figure

Which of the following statements is/are TRUE?

Text of the picture (copyable)

```html
<div id="app">
  <p v-if="isVisible">Hello</p>
  <p v-show="isVisible">World</p>
  <button @click="toggle">Toggle</button>
</div>
```
```javascript
new Vue({
  el: "#app",
  data: {
    isVisible: false
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
});
```

On initial page load, neither “Hello” nor “World” is visible in the browser.
On initial page load, the element using v-show exists in the DOM but is hidden.
After clicking the Toggle button once, both “Hello” and “World” become visible.
The v-if directive hides elements using CSS.
The v-show directive removes elements from the DOM when the condition is false.

MAD2 Quiz 1 · 15 Mar 2026 · open the full paper

Practice 44MCQ3 marks

Consider the following Vue application with markup index.html and javascript file app.js. index.html: question figure

app.js:

What will be rendered by the browser after 4 seconds?

Text of the picture (copyable)

```html
<div id="app">
    <h4>total payable amount is {{totalPayableAmount}}</h4>
</div>
<script src = "app.js"></script>
```
```javascript
const app = new Vue({
  el: '#app',
  data: {
    principal: 0,
    annualInterestRate: 0,
    duration: 0,
    totalPayableAmount: 0,
  },
  computed: {
    simpleInterest() {
      return (this.principal * this.annualInterestRate * this.duration) /
        100
    },
  },
})

let appData = [
  [2000, 10, 2],
  [3000, 20, 3],
  [5000, 30, 4],
]

let handler = setInterval(() => {
  data = appData.pop()
  app.principal = data[0]
  app.annualInterestRate = data[1]
  app.duration = data[2]
  app.totalPayableAmount += app.simpleInterest
}, 1000)
```

total payable amount is 6000
total payable amount is 8200
total payable amount is 1800
total payable amount is 7800

MAD2 Quiz 1 · 15 Mar 2026 · open the full paper

Practice 45MCQ5 marks

Consider the following Vue app with html and javascript file given below: File: index.html question figure

File: script.js question figure

What will be rendered on the browser for the code setup given above ?

Text of the picture (copyable)

```html
<div id="app">
  <my-comp>
    <h3>Exploring Vue Js</h3>

    <slot v-slot:last>
      <h3>Learning App Dev 2</h3>
    </slot>
  </my-comp>
</div>
```
```javascript
const MyComp = {
  name: 'my-comp',
  props: ['tech'],
  template: `
    <div class="container">
      <slot name="complete">
        <h3>Learned DBMS</h3>
      </slot>

      <slot>
        Exploring Frontend
      </slot>

      <slot name="last"></slot>
    </div>
  `
};

const app = new Vue({
  el: '#app',
  components: {
    MyComp
  }
});
```

text
```
Learned DBMS
Exploring Backend
```

text

Learned DBMS

Exploring Vue Js

This is Last Course

text
```
Learned DBMS
Exploring Vue Js
```
None of these.

MAD2 Quiz 1 · 15 Mar 2026 · open the full paper

Practice 46MCQ3 marks

Comprehension passage for this question

Consider the following HTML and Vue component code carefully and answer the given sub-questions. File: index.html question figure

File: script.js question figure

When the

lifecycle hook is invoked, which of the following statements becomes TRUE?

Text of the picture (copyable)

```
beforeMount()
```

The element exists in the DOM but still contains {{ message }}
text
```
```html
<p id="text">
```
```
The DOM content already reflects the updated value "Start A"
The hook has already executed
text
```
```
mounted()
```
```
The DOM does not exist at all

MAD2 Quiz 1 · 15 Mar 2026 · open the full paper

Practice 47MCQ3 marks

Comprehension passage for this question

Consider the following HTML and Vue component code carefully and answer the given sub-questions. File: index.html question figure

File: script.js question figure

What will be the final text content displayed in the browser inside the

element after the component is fully mounted and all statements in the

hook have executed?

Text of the picture (copyable)

`<p>`
```
mounted()
```

text
```
Start A
```
text
```
Start A B
```
text
```
Start A B DOM
```
text
```
Start A DOM
```

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 48MSQ2 marksselect all that apply

Considering the following code snippet, which statements are true about components in Vue? question figure

Text of the picture (copyable)

```
childComponent.$emit('update', 5)
```

Parent can listen with @update
Parent receives payload via $event
Child can directly modify parent state
$emit triggers a DOM event

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 49MCQ2 marks

What is the purpose of Redis in a Celery-based system?

To automatically retry failed tasks
To execute tasks in parallel
To return computed results in JSON format
To store scheduled tasks and serve as a message broker

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 50MCQ4 marks

Consider the following Vue Router setup and HTML. question figure

Suppose the webpage is served at http://127.0.0.1:5000. A user visits the URL http://127.0.0.1:5000/#/user/10/orders. What will be rendered on the browser?

Text of the picture (copyable)

```javascript
const User = {
  template: `
    <div>
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
};

const Overview = {
  template: `<p>User Overview</p>`
};

const Orders = {
  template: `<p>User Orders</p>`
};

const routes = [
  {
    path: "/user/:id",
    component: User,
    children: [
      { path: "", component: Overview },
      { path: "orders", component: Orders }
    ]
  }
];

const router = new VueRouter({ routes });
```

```html
<!-- html -->
<div id="app">
  <router-view></router-view>
</div>
```

User Orders
User 10 User Overview
User 10 User Orders
Nothing is rendered because sibling routes overwrite the parent route.

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 51MCQ2 marks

A developer creates a Vue component using both v-if and v-show directives on different elements with initially false conditions. Later, the conditions are changed to true. What is the key difference in how these two directives handle the DOM?

v-if removes the element from DOM when false, v-show only changes CSS display property
v-show removes the element from DOM when false, v-if only changes CSS display property
Both v-if and v-show re-mount the element and re-run lifecycle hooks
Both directives are identical in their functionality; they just have different naming conventions

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 52MCQ3 marks

A Promise chain is created as follows. The first Promise resolves with a string, which is then processed through multiple .then() handlers. What will be logged to the console? question figure

Text of the picture (copyable)

```javascript
const processString = (str) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(str.toUpperCase()), 100);
  });
};

Promise.resolve('hello')
  .then(processString)
  .then(result => result + ' WORLD')
  .then(console.log)
  .catch(err => console.log('Error:', err));
```

hello
hello WORLD
HELLO WORLD
An error will be thrown

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 53MCQ3 marks

A JavaScript object is created and then assigned to another variable. Modifications are made through both variables. What will be the final state of the original object? question figure

Text of the picture (copyable)

Code:
```javascript
let originalConfig = { apiUrl: 'https://api.example.com', timeout: 5000 };
let configCopy = originalConfig;
configCopy.timeout = 10000;
configCopy = { apiUrl: 'https://api2.example.com', timeout: 3000 };
console.log(originalConfig.timeout);
```

5000
3000
10000
undefined

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 54MCQ3 marks

A Vue Router application uses lazy-loaded route components. When a user navigates to a route with a dynamic parameter (e.g., /product/:id), and the computed property depends on this route parameter, what could be a potential issue if the component is not properly handling asynchronous operations?

The component will throw a critical error and crash the application
The computed property will return undefined because the component hasn't mounted yet
The route parameter will not be accessible in the computed property
The component will display data from the previously loaded route

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 55MCQ5 marks

A developer creates a Vue component with prototype chain inspection. The component uses class-based inheritance with lifecycle hooks. Consider the following scenario. Code: question figure

What will be the output on the browser's console?

Text of the picture (copyable)

```javascript
class BaseComponent {
  constructor(name) {
    this.name = name;
  }
}

class AdvancedComponent extends BaseComponent {
  constructor(name, role) {
    super(name);
    this.role = role;
  }
}

const comp = new AdvancedComponent('Alice', 'admin');
console.log(comp.__proto__ === AdvancedComponent.prototype);
console.log(comp.__proto__.__proto__ === BaseComponent.prototype);
console.log(comp instanceof BaseComponent);
console.log(comp instanceof AdvancedComponent);
```

true true true true
true false true true
false true true false
true true false false

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 56MSQ3 marksselect all that apply

In a web application using webhooks and Redis for real-time data synchronization: Scenario: An order management system where: • When an order is created, a webhook is sent to a notification service • Redis stores the current order cache • Multiple concurrent requests update the cache Which statements about this architecture are true?

Webhooks guarantee that the notification service will process events in the exact order they were triggered
Redis is suitable for this use case because it's an in-memory data structure store that provides fast access to cached data
The webhook will automatically retry if the notification service is temporarily unavailable
Webhooks use HTTP POST requests to communicate events asynchronously

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 57MCQ3 marks

Comprehension passage for this question

Consider the Vue application. question figure

Based on the above data, answer the given subquestions.

What happens when the user clicks the calculate button?

expensive() runs again because the DOM updates
expensive() does NOT run again because its dependencies did not change
Vue recomputes all computed properties on any state change
Nothing is displayed

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 58MCQ3 marks

Comprehension passage for this question

Consider the Vue application. question figure

Based on the above data, answer the given subquestions.

Under which condition will the computed property expensive() re-run?

When this.time changes
The user clicks anywhere on the DOM
Either this.a or this.b changes
When Date.now() changes

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 59MSQ3 marksselect all that apply

Comprehension passage for this question

Consider the Vue application. question figure

Based on the above data, answer the given subquestions.

What are the benefits of computed caching in Vue?

Reduced CPU usage
Faster rendering
Avoids unnecessary recomputation
Makes all computations asynchronous

MAD2 End Term · 21 Dec 2025 · open the full paper

Practice 60MCQ5 marks

Comprehension passage for this question

Consider the following Vue 2 (CDN) code. html code: question figure

script:

Based on the above data, answer the given subquestions.

What happens when the user clicks on "User 2" after initially opening "User 1"?

text

The route changes to /user/2 but the userId in data does not update.

text

The watcher updates `userId` to "2", and the `<p>` displays it instantly.

text

The `router-view` still shows User 1 because watchers don't re-render components.

text

An error occurs because `$route.params.id` cannot be watched.