JSFiddle - React, Tailwind, and code Playground
by Dedi Wibisono
HTML
<div id="BusDetail" class="section-ontop">
<h1>Bus Pergi</h1>
order code : {{ busInfo.orderNumber }} <br>
nama bus : {{ busInfo.depart[0].operator.operatorName }} <br>
Kelas : {{ busInfo.depart[0].seatClass }} <br>
tmp duduk : {{ busInfo.depart[0].seatSubClass }}
<h2>
Fasilitas
</h2>
fasilitas: {{ busInfo.depart[0].facilities }}
<hr>
berangkat: {{ busInfo.depart[0].from.name }} <br>
Alamat : {{ busInfo.depart[0].from.userAddress }} <br>
jam: {{ busInfo.depart[0].dateDepart.time.hour | addingZero}}:{{ busInfo.depart[0].dateDepart.time.minute | addingZero }} <br>
tanggal: {{ busInfo.depart[0].dateDepart.date.day }} {{ monthWording[busInfo.depart[0].dateDepart.date.month] }} {{ busInfo.depart[0].dateDepart.date.year }}
<hr>
{{ busInfo.depart[0].duration.hour }}j {{ busInfo.depart[0].duration.minute }}m <br>
<hr>
Pulang: {{ busInfo.depart[0].to.name }} <br>
Alamat : {{ busInfo.depart[0].to.userAddress }} <br>
jam: {{ busInfo.depart[0].dateArrive.time.hour | addingZero}}:{{ busInfo.depart[0].dateArrive.time.minute | addingZero }} <br>
tanggal: {{ busInfo.depart[0].dateArrive.date.day }} {{ monthWording[busInfo.depart[0].dateArrive.date.month] }} {{ busInfo.depart[0].dateArrive.date.year }}
<hr>
<h1>Kontak</h1>
<!-- {{ salutationWording[busInfo.depart[0].passengers[0].salutation] }} {{ busInfo.depart[0].passengers[0].firstName }} {{ busInfo.depart[0].passengers[0].lastName }} -->
<div class="section-body section-tapdetail">
<p class="section-title fs-16">Data Penumpang</p>
<div v-if="busInfo.depart.length > 0">
<div class="mb8 clearfix">
<div class="float-left w70 name mt6">Bus/Shuttle Pergi</div>
<div class="float-right age-label mt6">No Kursi</div>
</div>
<div class="mb8 clearfix" v-for="(pax, paxIndex) in busInfo.depart[0].passengers" :key="paxIndex">
<div...