Currently, I'm in the process of creating a hotel booking application and focusing on the booking feature.
Within this step, users are able to modify their preferred room type, number of adults, and number of children using a selection box.
To clarify, if a user selects a "standard room" with one adult and no children, the default price value for that specific room will be retrieved.
The fiddle link up to this point is provided here:
https://jsfiddle.net/c1ud4mkv/.
I require assistance moving forward from this stage. If a user wishes to stay with 2 adults and one or two children, the pricing needs to adjust accordingly.
For example; the current price for a standard room with 1 adult is Rs.1000.
If an extra adult is added by the user, the price should change to Rs.2000. And if a child is added along with 2 adults, the total price should be calculated as Rs.3000 (Rs.2000 + Rs.1000) (Rs.1000 is the price for each additional child).
The HTML code snippet:
<div id="app">
<table>
<thead>
<td>Room Type</td>
<td>Adult</td>
<td>Children</td>
<td>Total Price</td>
</thead>
<tbody>
<tr v-for="(row, index) in rows">
<td>
<select data-value="Room Type">
<option v-for="room in rooms">{{room.title}}</option>
</select>
</td>
<td>
<select data-value="1 Adult">
<option value="1">1 Adult</option>
<option value="2">2 Adults</option>
</select>
</td>
<td>
<select data-value="No Child">
<option value="1">No Child</option>
<option value="2">1 Child</option>
<option value="3">2 Children</option>
</select>
</td>
<td v-for="item in items">
{{item.price}}
</td>
</tr>
</tbody>
</table>
<div class="add-remove">
<div class="col-md-6 text-center add">
<a @click="addRoom" class="add-room"> Add Room </a>
</div>
<div class="col-md-6 text-center remove">
<a @click="removeRoom(index)" class="remove-room"> Remove Room </a>
</div>
</div>
</div>
The script being used was:
new Vue({
el: '#app',
data: {
rows: [],
rooms: [
{
value:0,
title: 'Standard Room'
},
{
value:0,
title: 'Deluxe Room'
},
],
items: [{
price: 1000,
}]
},
methods: {
addRoom: function() {
var elem = document.createElement('tr');
this.rows.push({
});
},
removeRoom: function(index) {
this.rows.splice(index, 1);
},
}
})
For the corresponding JSFiddle visit this link.