🎓 Demo Tuweb 3 · MSIM4309

📦 Sistem Stok Bahan Ajar

Demo Vue.js via CDN · v-model · v-if · v-for · @click · computed

{{ totalItem }}
Total Item computed
{{ totalTersedia }}
Tersedia
{{ totalHabis }}
Habis / Terbatas
✏️ Tambah Bahan Ajar v-model
{{ errors.nama }}
{{ errors.kode }}
{{ errors.stok }}
💡 Konsep Vue yang bekerja di sini:
v-model input terhubung ke form.nama, form.stok, dll
v-if pesan error muncul jika validasi gagal
@click tombol memanggil method tambahBarang()
📋 Daftar Stok v-for v-if
🔍
📭

Belum ada data stok.
Tambahkan bahan ajar lewat form di kiri.

Tidak ada hasil untuk pencarian "{{ keyword }}".

# Nama Bahan Ajar Kode MK Kategori Stok Status Aksi
{{ index + 1 }} {{ item.nama }} {{ item.kode }} {{ item.kategori || '-' }} {{ item.stok }} {{ item.stok === 0 ? 'Habis' : item.stok <= 5 ? 'Terbatas' : 'Tersedia' }}
💡 Konsep Vue yang bekerja di sini:
v-for merender setiap item dari array filteredItems
v-if empty state muncul jika daftar kosong
:class class status berubah dinamis sesuai jumlah stok
computed filteredItems otomatis difilter saat keyword berubah