Consider the following Vue application with markup “index.html” and javascript file “app.js”. index.html: Total Run: {{total}} {{Player.name}}: {{Player.run}} Extra Run app.js: new Vue({ el: '#app', data: { extra: false, total: 20, Player: { name: 'M.S. Dhoni', run: 10 } }, methods: { addRuns(run) { if (this.extra === true) { this.Player.run += run } this.total += run this.extra = false }, }, }) Suppose the application is running on ‘ http://localhost:8080 ’. If the user clicks on the button with the text “Extra”, and then clicks on the button with the text “Run” twice. What will be rendered inside the element with ID “total” and “player”, respectively?

(B) Total Run: 28, M.S. Dhoni: 14

(A) Total Run: 24, M.S. Dhoni: 14

(C) Total Run: 24, M.S. Dhoni: 18

(D) Total Run: 28, M.S. Dhoni: 18

Modern Application Development II · End Term · 11 Dec 2022 · September 2022 term · Set ETD1-2

Question 15: Consider the following Vue application with markup “inde…

Question 15

+4.5 marksOne correct option

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

index.html:

html

1<body>
2    <div id="app">
3      <h4 id="total">Total Run: {{total}}</h4>
4      <h4 id="player">{{Player.name}}: {{Player.run}}</h4>
5      <button @click="extra=true">Extra</button>
6      <button @click="addRuns(4)">Run</button>
7    </div>
8    <script
9src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
10    <script src="app.js"></script>
11  </body>

app.js:

javascript

1new Vue({
2  el: '#app',
3  data: {
4          extra: false,
5          total: 20,
6          Player: { name: 'M.S. Dhoni', run: 10 }
7        },
8
9  methods: {
10    addRuns(run) {
11      if (this.extra === true) {
12        this.Player.run += run
13      }
14      this.total += run
15      this.extra = false
16    },
17  },
18})

Suppose the application is running on ‘http://localhost:8080’. If the user clicks on the button with the text “Extra”, and then clicks on the button with the text “Run” twice. What will be rendered inside the element with ID “total” and “player”, respectively?

A
Total Run: 24, M.S. Dhoni: 14
B
Total Run: 28, M.S. Dhoni: 14
C
Total Run: 24, M.S. Dhoni: 18
D
Total Run: 28, M.S. Dhoni: 18

Show answer

Correct answer

B
Total Run: 28, M.S. Dhoni: 14

See the whole paper Take it as a mock test

Question 15 of 32 in the IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 11 Dec 2022, in the September 2022 term (IIT M DIPLOMA AN1 EXAM ETD1 11 Dec 2022). It carries 4.5 marks.

Question 15: Consider the following Vue application with markup “inde…

Question 15

More questions from this paper