Question 25
Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.
index.html:
<body> <div id="app"> <book-slot :currentslot="slot" @book="book"></book-slot> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="app.js"></script></body>app.js:
const bookSlot = { template: `<div id='slot-detail'> Slot ID: {{currentslot.id}}, Slot Status: {{currentslot.status?'Booked':'Not Booked'}}</div> <button @click="$emit('book')"> Book </button> </div>`, props: ['currentslot'],}
new Vue({ el: '#app', data: { slot: { id: 1, status: true }, }, methods: { book() { this.slot.status = !this.slot.status }, }, components: { 'book-slot': bookSlot, },})Suppose the application is running on ‘http://localhost:8080’. What will be rendered by the browser inside the div element with ID ‘slot-detail’, when the user visits the website home page for the first time (except the button)?
Slot ID: 1, Slot Status: Booked
Slot ID: 1, Slot Status: Not Booked
Slot ID: 1
Slot Status: Booked