Holaaa.
Mencatat barang-barang- Menampilkan daftarnya
- Menghapus data barang
Di bagian sebelumnya, saya sudah menyelesaikan fitur MVP yang pertama. Yes! 🎉
Kali ini saya akan berusaha menyelesaikan fitur yang kedua, yaitu menampilkan daftar barang yang sudah diinput oleh user. Gas!
TL;DR dulu
Di bagian paling bawah ada link ke source code,
plus preview aplikasinya. 👍
Saya mulai dari memisahkan bagian input dan output.
...
<div id="app">
<!-- Input Area -->
<div class="border">
<input class="border" placeholder="name" v-model="name" value>
<textarea
class="border"
placeholder="description"
v-model="description">
</textarea>
<button class="border" @click="add">add</button>
</div>
<!-- Output Area -->
<div class="border">
</div>
</div>
...
Lalu, saya tampilkan nama barang-barangnya, sederhana dulu aja.
...
<!-- Output Area -->
<div class="border">
<ul>
<li v-for="item in items">{{ item.name }}</li>
</ul>
</div>
...
Sip, lancar. Kalau masukin nama terus pencet tombol "add", sudah terbaca namanya. Tapi masih perlu diperjelas nih.
...
<!-- Output Area -->
<div class="border">
<ul>
<li v-for="item in items">
name: {{ item.name }} <br>
description: "{{ item.description }} <hr>"
</li>
</ul>
</div>
...
Sudah lebih jelas. Tapi masih ada yang kurang. Saya kasih nomor biar gampang dihitung.
...
<li v-for="(item, index) in items">
{{ index }} <br>
name: {{ item.name }} <br>
description: "{{ item.description }} <hr>"
</li>
...
Yap. Tapi kok nomornya mulai dari 0? Hmmm.
Tinggal tambah 1, jadinya {{ index+1 }}. Sip.
Bonus untuk user, kita kasih tahu berapa total jumlah barang yang dia punya.
...
<!-- Output Area -->
<div class="border">
<p>total items: {{ this.items.length }}</p>
<ul>
<li v-for="(item, index) in items">
{{ index+1 }} <br>
name: {{ item.name }} <br>
description: "{{ item.description }} <hr>"
</li>
</ul>
</div>
...
Selesai!
Gampang kaaan?? Hehe.
Untuk memperpanjang artikel, sekalian kita styling aja gimana?
Tailwind Time!
Saatnya mainan Tailwind 🎉
Pertama-tama kita layout dulu. Keinginan saya di awal, layoutnya dibagi jadi dua, kiri untuk input, dan kanan untuk output. Tapi setelah saya coba, ternyata tidak terlalu enak. Jadinya saya balik, input di kanan dan output di kiri. Cekidot:
...
<div id="app" class="p-12">
<div class="flex flex-wrap border">
<!-- Output Area -->
<div class="w-full md:w-1/2">
<div class="border">
<p>total items: {{ this.items.length }}</p>
<ul>
<li v-for="(item, index) in items">
{{ index+1 }} <br>
name: {{ item.name }} <br>
description: {{ item.description }} <hr>
</li>
</ul>
</div>
</div>
<!-- Input Area -->
<div class="w-full md:w-1/2">
<div class="border">
<input class="border" placeholder="name" v-model="name" value>
<textarea
class="border"
placeholder="description"
v-model="description">
</textarea>
<button class="border-b" @click="add">add</button>
</div>
</div>
</div>
</div>
...
Not bad. Selanjutnya, styling bagian input.
...
<!-- Input Area -->
<div class="w-full md:w-1/2">
<div class="border-l">
<div class="border-b">
<input class="p-4 w-full" placeholder="name" v-model="name" value>
</div>
<div class="border-b">
<textarea
class="p-4 block w-full"
placeholder="description"
v-model="description">
</textarea>
</div>
<button class="border-b p-4 w-full" @click="add">add</button>
</div>
</div>
...
Buat saya styling itu sungguh berbahaya, apalagi tanpa acuan file desain alias freestyle. Bisa lupa waktu!
Jadi ya secukupnya dulu, pindah ke bagian output.
...
<!-- Output Area -->
<div class="w-full md:w-1/2">
<div class="p-4">
<p class="border-b text-right mb-4">
total items: {{ this.items.length }}
</p>
<ul>
<li v-for="(item, index) in items" class="w-full">
<div class="border p-2 flex w-full">
<div class="border px-2 mr-2">
{{ index+1 }}
</div>
<div>
<p class="text-xs text-gray-600">name:</p>
<p class="font-bold">{{ item.name }}</p>
<p class="text-xs text-gray-600">description:</p>
<p>{{ item.description }}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
...
Bungkus!
Oke, dikarenakan sudah mulai membengkak, source code akan saya bagikan lewat GitHub saja. Perlu diingat bahwa source code-nya cuma ada satu, dan terus berubah sepanjang series ini. Jadi, ada kemungkinan ketika kalian buka reponya, sudah jauh berbeda dari yang di artikel ini.
Ini dia linknya.
Bonus, saya kasih codesandbox. Tapi jangan dicopas, karena saya cuma sembarangan masangnya. Yang penting bisa preview. Cekidot~
Sampai jumpa di bagian selanjutnya. Dadah!
Top comments (0)