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

Thursday, December 17, 2020

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


bewoksatukosong.com
| om bewok akan sharing mengenai lists looping vue js dan button event click listener. Jadi sebenarnya hal yang bakal sering kalian lakuin, ketika membuat aplikasi menggunakan vue js. 

Study Case

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.

List-nya akan kita tulis nama - nama makanan dan menggunakan syntax ol li, yang mana akan menggunakan angka.

  1. nasi padang
  2. nasi goreng
  3. nasi uduk
Om bewok mau nanya dong, kalau mau nambahin makanan-nya 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 button-nya, jadi ketika dia ingin menambahkan makanan-nya, kita hanya perlu menuliskan makanan, lalu tinggal klik button-nya.

maka dari itu ada yang namanya button event click listener, ini adalah sebuah function ketika kita klik button tersebut, dia akan melakukan aksi atau apapun yang kita suruh. 

Untuk menambahka kita menggunakan method push yang fungsinya untuk menambahkan pada list tersebut.

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>loop list</title>
</head>

<body>
    <div id="root">
        <ol>
            <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({
            el: '#root',
            data: {
                makanan: ['nasi padang', 'nasi goreng', 'nasi uduk']
            }
        });
    </script>
</body>

</html>
Maka hasil-nya seperti dibawah ini.

Nah sekarang kita akan menambahkan form input untuk menambahkan list makanan.
Kodingan-nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loop list & button event click listener</title>
</head>

<body>
    <div id="root">
        <ol>
            <li v-for="mkn in makanan" v-text="mkn"></li>
        </ol>

        <input type="text" id="input" v-model="tambahMakanan">
        <!-- ketika button di klik add di akan melakukan aksi / event -->
        <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: {
                // button @click="add"
                add() {
                    this.makanan.push(this.tambahMakanan);
                    this.tambahMakanan = '';
                }
            }
        });
    </script>
</body>

</html>
Hasilnya seperti dibawah ini



No comments:

Post a Comment