Consider the following Vue application with javascript file “app.js” and markup file “index.html”. index.html: app.js: const Category = { template: {{route.params.name}} , } const Error = { template: Page Not Found , } const Product = { template: 0'> Name: {{product.name}}, Price: {{product.price}} No {{keyword}} Found , data() { return { keyword: this.route.params.name, products: [ { category: 'Mobile', name: 'Samsung', price: '10K' }, { category: 'Mobile', name: 'Apple', price: '50K' }, { category: 'Laptop', name: 'Lenovo', price: '70K' }, ], } }, computed: { filteredProducts() { return this.products.filter( (product) => product.category.toLowerCase() == this.keyword.toLowerCase() ) }, }, components: { Error, }, } const router = new VueRouter({ routes: [ { path: '/category/:name', component: Category, children: [{ path: 'product', component: Product }], }, { path: '', component: Error }, ], }) new Vue({ el: '#app', template: ' ', router, }) Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/category/desktop/product”?

(C) Option figure from the original question paper

(A) Option figure from the original question paper

(B) Option figure from the original question paper

(D) Option figure from the original question paper

Modern Application Development II · Quiz 2 · 6 Aug 2023 · May 2023 term

Question 4: Consider the following Vue application with javascript fi…

Question 4

+3 marksOne correct option

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

index.html:

html

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

app.js:

javascript

1const Category = {
2  template:
3  `<div>{{$route.params.name}}<router-view></router-view></div>`,
4}
5
6const Error = {
7  template: `<div><slot> Page Not Found </slot></div>`,
8}
9
10const Product = {
11  template: `
12  <div>
13    <div v-if='filteredProducts.length > 0'>
14        <div v-for='product in filteredProducts'>
15            Name: {{product.name}}, Price: {{product.price}}
16        </div>
17    </div>
18    <Error v-else> No {{keyword}} Found </Error>
19  </div>`,
20  data() {
21    return {
22      keyword: this.$route.params.name,
23      products: [
24        { category: 'Mobile', name: 'Samsung', price: '10K' },
25        { category: 'Mobile', name: 'Apple', price: '50K' },
26        { category: 'Laptop', name: 'Lenovo', price: '70K' },
27      ],
28    }
29  },

javascript

1  computed: {
2    filteredProducts() {
3      return this.products.filter(
4        (product) =>
5          product.category.toLowerCase() ==
6  this.keyword.toLowerCase()
7      )
8    },
9  },
10  components: {
11    Error,
12  },
13}
14const router = new VueRouter({
15  routes: [
16    {
17      path: '/category/:name',
18      component: Category,
19      children: [{ path: 'product', component: Product }],
20    },
21    { path: '*', component: Error },
22  ],
23})
24
25new Vue({
26  el: '#app',
27  template: '<div><router-view /></div>',
28  router,
29})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/category/desktop/product”?

Show answer

Correct answer

See the whole paper Take it as a mock test

Question 4 of 16 in the IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 6 Aug 2023, in the May 2023 term (IIT M FOUNDATION AN2 EXAM QPF2 06 Aug 2023). It carries 3 marks.

Question 4: Consider the following Vue application with javascript fi…

Question 4

More questions from this paper