Home / Past papers / MAD2 Quiz 2 / this paper
Why does this fail?```javascript
const heading = document.querySelector("h1")
```
document
works only after using 
```javascript document.querySelector() ``` ``` setTimeout() ```
The above code is initially loaded on the browser and then the browser is refreshed two times. What will be the final output?```javascript
function addProduct(product) {
let products = JSON.parse(localStorage.getItem('products')) || [];
products.push(product);
localStorage.setItem('products', JSON.stringify(products));
}
function getProducts() {
return JSON.parse(localStorage.getItem('products')) || [];
}
addProduct({ id: 3, name: 'Tablet' }.name);
console.log(getProducts());
```
```javascript
async function getUser() {
const response = await fetch("https://api.example.com/user/1");
if (!response.ok) {
throw new Error("Request failed");
}
const data = await response.json();
console.log(data.name);
}
getUser();
```
should use POST method by default, not GET``` fetch() ```
and
will throw errors because response is a 
response.ok ``` response.json() ``` Promise
cannot be called on a
response; use
instead``` .json() ``` fetch ``` .text() ```
does not work inside
functions``` fetch() ``` async

```javascript
console.log("A")
setTimeout(() => console.log("B"), 0)
Promise.resolve().then(() => console.log("C"))
console.log("D")
```
What happens to
?```javascript
const settings = { theme: "light", layout: { sidebar: true } }
const copy = { ...settings }
copy.layout.sidebar = false
```
```
settings.layout.sidebar
```
because spread syntax always creates a deep copy.true
because the nested object is still shared in a shallow copy.false
because
is removed from the original object.undefined layout
What will be the output of above code on the browser’s console?```javascript
async function fetchData() {
console.log("1");
const result = await new Promise((resolve) => {
setTimeout(() => resolve("done"), 1000);
console.log("2");
});
console.log("3:", result);
}
fetchData();
console.log("4");
```
```
mutations: {
ADD_TO_CART(state, product) {
state.cart.push(product)
}
}
```
```javascript
mutations: {
ADD_TO_CART(state, product) {
setTimeout(() => {
state.cart.push(product)
}, 500)
}
}
```
```javascript
mutations: {
ADD_TO_CART(state, product) {
fetch('/api/add').then(() => {
state.cart.push(product)
})
}
}
```
```javascript
mutations: {
ADD_TO_CART(state, product) {
Promise.resolve().then(() => {
state.cart.push(product)
})
}
}
```
Which of the following statements are correct?```html
<div class="card" data-price="499">
<span id="title">Vue Book</span>
</div>
```
returns
.```javascript
document.querySelector(".card").dataset.price
```
"499"
converts the value to numeric
.```javascript
Number(document.querySelector(".card").dataset.price)
```
499
can read the visible text
.```javascript
document.getElementById("title").innerText
```
"Vue Book"
returns a single element, not a collection.```javascript
document.querySelectorAll(".card")
```
header.``` Authorization: Bearer <token> ```
can read the identity stored in the token.``` get_jwt_identity() ```
for loading initial data.``` created() ```
for starting DOM-related work or timers.``` mounted() ```
for cleanup.``` beforeDestroy() ```
for declaring reactive
.``` destroyed() ``` data
inside a parent route, •
, •
inside a method. Which statements are correct?children
```
{ path: '*', component: NotFound }
```
```javascript
this.$router.go(-1)
```
can be used to organize nested routes under a parent route.children
can act as a fallback for unknown routes.*
tries to go back one step in browser history.```javascript this.$router.go(-1) ```

```javascript
const store = new Vuex.Store({
state: {
discount: 10,
products: [
{name: 'apple',
price: 120
},
{
name: 'banana',
price: 60
}
]
},
mutations: {
reducePrice: state=>{
// Code1
}
}
})
```
```javascript
this.$store.state.products.forEach(product => { product.price -= (state.discount)/100*product.price; })
```
```javascript
state.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```
```javascript
commit.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```
```javascript
dispatch.products.forEach(product => { product.price -= (state.discount)/100*product.price;})
```
Component.vue
After triggering all three methods (
,
and
) one by one, which of the following statements is correct?```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
and
will appear in Vue DevTools mutation history, but
will appear with a delay.addItem_A addItem_B addItem_B
will update the cart because mutations cannot be called directly from components.addItem_B
will throw an error because Vuex prevents direct state modification.addItem_C
What will be logged in the console when this component first loads?```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>
```
A: "" → B: Hello from Vue! → C: Hello from Vue!

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

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

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

A: "" -> B: "" -> C: Hello from Vue!
file2: ProfileComponent.vue


``` this.$router.params.username ```

``` this.$route.params.username ```

``` this.$router.query.username ```

``` this.$route.query.username ```

```
{ path: "Settings" }
```
```json
{ path: "SettingsComponent" }
```
```json
{ "name": "Settings" }
```
```json
{ "name": "SettingsComponent" }
```