MAD2 week 6 - real exam questions

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
});
```

```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

| 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 |

```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
```

SearchResults
keyword

```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>
```

```javascript
const heading = document.querySelector("h1")
```

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

```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

```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>
```

```javascript
console.log(typeof setTimeout)
console.log(typeof document)
```

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

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

```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>
```

```javascript
const CAPACITY = 75;
const TOTAL_PEOPLE = 213;

function allocatePeople() {
  return new Promise((resolve, reject) => {
    let slots = [0, 0, 0];
    let remaining = TOTAL_PEOPLE;

    for (let i = 0; i < slots.length; i++) {
      if (remaining >= CAPACITY) {
        slots[i] = CAPACITY;
        remaining -= CAPACITY;
      } else {
        slots[i] = remaining;
        remaining = 0;
      }
    }

    reject(slots);
  });
}

async function startAllocation() {
  try {
    const result = await allocatePeople();
    console.log("Passed " + JSON.stringify(result));
  } catch (error) {
    console.log("Failed " + JSON.stringify(error));
  }
}

startAllocation();
```

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

```
updated()
```

```javascript
methods: {
  async login() {
    const response = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: this.email, password: this.password })
    });
    const data = await response.json();
    console.log(data.message);
  }
}
```
```python
@app.route('/login', methods=['POST'])
def login():
    email = request.json['email']
    password = request.json['password']
    query = f"SELECT * FROM users WHERE email = '{email}'" \
            f" AND password = '{password}'"
    result = db.execute(query)
    if result:
        return jsonify({"message": "Login successful"})
    return jsonify({"message": "Invalid credentials"})
```

```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;
    }
  }
}
```

```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>
```

```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
});
```

```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;
      });
  }
}
```

```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;
        }
    }
});
```

```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
  }
});
```

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

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

```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>
```

```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);
```

Match the following Vue 2 directives in Column A with their correct functionality in Column B:

| Column A | Column B |
|---|---|
| 1. v-bind | A. Creates two-way data binding between form inputs and Vue data properties |
| 2. v-model | B. Conditionally shows or hides elements using CSS display property |
| 3. v-on | C. Binds HTML attributes or component properties to Vue data expressions |
| 4. v-show | D. Attaches event listeners to DOM elements for handling user interactions |
| 5. v-cloak | E. Prevents the flash of un-compiled template content before Vue initializes |

Which Vue.js features are shown in the code?

Consider this Vue.js component code:

```javascript
const TodoApp = {
  template: `
    <div>
      <input v-model="newTodo" @keyup.enter="addTodo" />
      <ul>
        <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
      </ul>
    </div>
  `,
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push({ id: Date.now(), text: this.newTodo });
        this.newTodo = '';
      }
    }
  }
}
```

What happens when a user types "Learn Vue" into the input field and presses Enter?

Note: The `@keyup.enter` directive calls `addTodo()` when the Enter key is pressed.

Given this Vue Router setup:

```javascript
const routes = [
  { path: '/user/:id/profile', component: UserProfile },
  { path: '/user/:id', component: User },
  { path: '*', component: NotFound },
  { path: '/user/:id/settings', component: UserSettings },
];
```

What component renders for URL /user/123/settings?

Consider the following Vue component structure with nested components and
complex slot configurations:

```javascript
Vue.component('data-provider', {
  template: `
    <div class="provider">
      <slot name="header" :user="currentUser" :loading="isLoading"></slot>
      <slot name="content" :items="filteredItems" :count="itemCount"></slot>
      <slot :fallback="defaultMessage" :error="errorState"></slot>
    </div>
  `,
  data() {
    return {
      currentUser: { name: 'John', role: 'admin' },
      isLoading: false,
      filteredItems: ['item1', 'item2', 'item3'],
      itemCount: 3,
      defaultMessage: 'No data available',
      errorState: null
    }
  }
});

Vue.component('parent-component', {
  template: `
    <data-provider>
      <template v-slot:header="{ user, loading }">
        <h1 v-if="!loading">Welcome {{ user.name }}</h1>
        <span v-else>Loading...</span>
      </template>

      <template v-slot:content="slotProps">
        <ul>
          <li v-for="item in slotProps.items" :key="item">
            {{ item }} ({{ slotProps.count }} total)
          </li>
        </ul>
      </template>

      <template v-slot:default="defaultProps">
        <p>{{ defaultProps.fallback }}</p>
      </template>
    </data-provider>
  `
});
```

Now consider this usage of the parent-component:

```html
<div id="app">
  <parent-component></parent-component>
</div>
```

```javascript
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: UserProfile
  },
  {
    path: '/product/:category/:id',
    name: 'ProductDetail',
    component: ProductDetail
  }
];
```
```html
<template>
  <div>
    <button @click="goToUser">View User</button>
    <button @click="goToProduct">View Product</button>
    <router-link :to="{ name: 'Home' }">Home</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser() {
      this.$router.push({ name: 'UserProfile', params: { id: 123 } });
    },
    goToProduct() {
      this.$router.push({ name: 'ProductDetail',
                           params: { category: 'electronics', id: 456}
                         });
    },
    navigateOne() {
      this.$router.push({ name: 'UserProfile', params: { id: 555 },
                           query: { tab: 'settings'}
                         });
    },
    navigateTwo() {
      this.$router.replace({ name: 'Home' });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>
```

The following code is using Vue 2 and Vue router 3 running on
http://127.0.0.1:5500.

Filename: index.html
```html
<body>
    <div id="app"></div>
    <script src="app.js" type="module"></script>
</body>
```

Filename: router.js
```javascript
const Home = { template: "<div>Home Page</div>" };
const Dashboard = {
    template: "<div>Dashboard <router-view></router-view></div>",
};
const Stats = { template: "<p>Stats Component</p>" };
const Settings = { template: "<p>Settings Component</p>" };
const NotFound = { template: "<div>404 Not Found</div>" };

const router = new VueRouter({
    routes: [
        { path: "/", component: Home },
        {
            path: "/dashboard",
            component: Dashboard,
            children: [
                { path: "stats", component: Stats },
                { path: "settings", component: Settings },
            ],
        },
        { path: "**", component: NotFound },
    ],
});

export default router;
```
Filename: app.js

```javascript
import router from "./router.js";

new Vue({
  el: "#app",
  router,
  template: `<div><router-view></router-view></div>`,
});
```

What will be displayed when the user visits
http://127.0.0.1:5500/#/dashboard/stats?

Consider the following Vue 2 component defined using the CDN version:
Filename: index.html

```html
<div id="app">
  <p>{{ message }}</p>
</div>
```

Filename: app.js

```javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Initial'
    };
  },
  created() {
    console.log('Created Hook');
    this.message = 'Created Hook Called';
    this.fetchData();
  },
  mounted() {
    console.log('Mounted Hook');
  },
  methods: {
    async fetchData() {
      const res = await new Promise(resolve => {
        setTimeout(() => resolve('Data Loaded'), 1000);
      });
      this.message = res;
      console.log('Data updated after fetch');
    }
  }
});
```

What will be the sequence of console logs and final content shown on the web page after 1 second?

Consider the following Vue 2 code with Vuex 3 used via CDN, assume the Vuex
store is correctly injected into the Vue instance.
Filename: store.js
```javascript
export default store = new Vuex.Store({
  state: {
    score: 10,
  },
  mutations: {
    increaseScore(state) {
      state.score += 5;
    },
  },
  actions: {
    increaseScoreAsync({ commit }) {
      setTimeout(() => {
        commit("increaseScore");
      }, 1000);
    },
  },
});
```
Filename: score-display.js
```javascript
export default Vue.component('score-display', {
  template: `
    <div>
      <p>Current Score: {{ score }}</p>
      <button @click="boostNow">Boost Now</button>
      <button @click="boostLater">Boost After 1s</button>
    </div>
  `,
  computed: {
    score() {
      // CODE 1
    }
  },
  methods: {
    boostNow() {
      // CODE 2
    },
    boostLater() {
      // CODE 3
    }
  }
});
```
Which of the following correctly fills in CODE 1, CODE 2, and CODE 3 for the score to be
displayed and for the **boostNow()** and **boostLater()** methods to work correctly?

Consider the below application with markup "index.html" and JavaScript file
"app.js".
Filename: index.html

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

```javascript
const inventory = {
  101: {product: "Canvas", quantity: 15, warehouse: 3},
  102: {product: "Brushes", quantity: 8, warehouse: 2}
}

const errorPage = {
  template: `<h1>Item not found in inventory!</h1>`
}

const productDetails = {
  template: `<h1>{{item.product}} - {{item.quantity}} units stored
  in
  {{item.warehouse}} locations.</h1>`,

  data() {
    return {item: inventory[this.$route.params.productId]}
  },
  watch: {
    '$route'(to, from) {
      this.item = inventory[to.params.productId]
    }
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/inventory/:productId', component: productDetails },
    { path: '*', component: errorPage },
  ],
})

new Vue({
  el: '#app',

  template: '<div><router-view /></router-view></div>',
  router,
})
```

Suppose the application is running on "http://localhost:3000", select the correct option(s)?

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

Filename: index.html

```html
<div id="app">
  <data-panel>
    <template #sidebar>
      <span>Navigation Menu</span>
    </template>
    <template #actions>
      <button>Save Changes</button>
      <button>Cancel</button>
    </template>
    <template #default>
      <h3>Main Dashboard</h3>
      <p>Welcome to the control panel</p>
    </template>
    <template #footer>
      <small>Last updated: Today</small>
    </template>
    <div>Extra content outside templates</div>
  </data-panel>
</div>
```

Filename: app.js

```javascript
Vue.component("data-panel", {
  template: `<div class="panel">
    <header>
      <slot name="sidebar"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <section>
      <slot name="actions"></slot>
    </section>
    <footer>
      <slot name="summary"></slot>
    </footer>
  </div>`,
});
const app = new Vue({
  el: "#app",
});
```

What will be the visual output displayed in the browser?

Consider the following Vue.js (Vue 2) code to answer the following question:

```html
<div id="app">
  <my-counter :start="5"></my-counter>
</div>

<script>
  Vue.component('my-counter', {
    props: ['start'],
    data: function () {
      return {
        count: this.start
      };
    },
    template: `
      <div>
        <p>{{ count }}</p>
        <button @click="increment">Increment</button>
      </div>
    `,
    methods: {
      increment() {
        this.count++;
      }
    }
  });

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

What will be displayed when the page loads, and what happens when you click the button?