Belajar Lists Loop Dan Button Event Click Listener Vue Js Versi 2 Part 2 - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Saturday, July 17, 2021

Belajar Lists Loop Dan Button Event Click Listener Vue Js Versi 2 Part 2


bewoksatukosong.com
| om bewok akan sharing mengenai List dan Button Event di vue versi 2. Hal ini akan sering kita lakukan dalam pembuatan aplikasi di vue. Oke langsung saja kita mulai

Cara Membuat List di VUE

List looping ini maksudnya kalian membuat sebuah daftar yang mana akan kita looping (berulang), kenapa berulang ? karena pasti kalian capek dong, kalau harus di tulis satu - persatu, nah jadi kita hanya memanggil array-nya, maka semua-nya akan terpanggil.

Listnya akan kita tulis nama - nama makanan dan menggunakan syntax ol li, yang mana akan menggunakan angka. Contohnya seperti dibawah ini ya

  1. nasi padang
  2. nasi goreng
  3. nasi uduk

Seperti biasa kalian membuat file-nya terlebih dahulu dengan nama latihan-2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Membuat Daftar Makanan Indonesia</title>
</head>
<body>
	<div id="root">
		<ol>
			<!-- v-for adalah looping dari vue -->
			<!-- Jadi perintahnya adalah "tolong tampilkan text mkn yang ada di dalam data makanan-->
			<li v-for="mkn in makanan" v-text="mkn"></li>
		</ol>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	<script>
		const app = new Vue ({
			// element yang kita panggil adalah <div id="root"></div>
			el: '#root',
			data: {
				// kita buat array, array ini ada data dengan nama makanan
				makanan: ['nasi padang', 'nasi goreng', 'nasi uduk']
			}
		});
	</script>
</body>
</html>
Maka hasil-nya seperti dibawah ini.
Om bewok mau nanya dong, kalau mau nambahin makanannya bisa ga ? jangan cuman 3 aja, soalnya kan aku hobi-nya makan, pasti makanan kesukaanku lebih dari itu ? 
Bisa dong, oleh karena itu kita menggunakan form input lalu ada buttonnya, jadi ketika dia ingin menambahkan makanannya, kita hanya masukin makanannya melalaui input, lalu tinggal klik buttonnya. Kita sebut button event click listener, ini adalah sebuah function ketika kita klik button tersebut, dia akan melakukan aksi atau tergantung apa yang kita perintahkan

Untuk menambahkan data kita menggunakan method push yang fungsinya untuk menambahkan data pada list tersebut.
Langsung saja kita buat file dengan nama input-list.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input data makanan</title>
</head>
<body>
    <div id="root">
        <ol>
            <!-- kita buat looping dengan menggunakan v-for -->
            <li v-for="mkn in makanan" v-text="mkn"></li>
        </ol>
        <!-- kita tambahkan model tambahMakanan -->
        <input type="text" id="input" v-model="tambahMakanan">
        <!-- kita tambahkan event listener dengan nama add -->
        <button @click="add">Tambah Makanan</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        const app = new Vue ({
            el: '#root',
            data : {
                tambahMakanan : '',
                makanan : ['nasi padang', 'nasi goreng', 'nasi uduk']
            },

            methods: {
                // add kita dapat dari event listener button
                add() {
                    // kita gunakan method push ke tambahMakanan yakni model dari input 
                    this.makanan.push(this.tambahMakanan);
                    
                    // setelah kita tambahkan, kita clear / kosongkan input tambahMakanan
                    this.tambahMakanan = '';
                }
            }
        })
    </script>
</body>
</html>
Hasilnya seperti dibawah ini
Selanjutnya di kita akan belajar mengenai Attribut dan Class di Vue 2 Part 3

No comments:

Post a Comment