Latihan 1: Proyek: Todo App — Vue

Latihan 1 dari materi Proyek: Todo App di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya const todos = ref([]), const input = ref(""), dan addTodo yang menambah isi kolom ke todos lalu mengosongkan input; semuanya tetap. Kamu menulis template-nya, di dalam <div> yang sudah ada:

<input id="todo-input" v-model="input" />.
<button id="add-btn" @click="addTodo">Tambah</button>.
<ul id="todo-list"> berisi <li v-for="(todo, i) in todos" :key="i">{{ todo }}</li>.

Yang dicek:

Ada #todo-input, #add-btn, dan #todo-list.
Setelah Belajar Vue diketik ke #todo-input, #add-btn masih ada.
Setelah #add-btn diklik, #todo-list memuat Belajar Vue.
Setelah klik itu, #todo-input kosong lagi.
Kodenya memuat v-model, v-for, dan @click (atau v-on:click).

Hint

Fungsinya sudah ada di starter. Yang kurang cuma tiga sambungan di template: kolom ketik ke input, tombol ke addTodo, dan daftar dari todos.
Input id todo-input memakai v-model ke input. Tombol id add-btn memakai @click ke addTodo. Ul id todo-list berisi li dengan v-for di todos dan :key.
<input id="todo-input" v-model="input" /> <button id="add-btn" @click="addTodo">Tambah</button> <ul id="todo-list"><li v-for="(todo, i) in todos" :key="i">{{ todo }}</li></ul>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Proyek: Todo App — Vue

Hint

Memperbarui Aplikasi