Latihan 2 dari materi Transition & Animation di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya const items = ref(["Item 1", "Item 2"]) dan let counter = 2; keduanya tetap. Bikin daftar yang bisa ditambah:
const addItem = () => { counter++; items.value.push("Item " + counter) }.<div>, tambahkan <button id="add-item" @click="addItem">Tambah</button> dan <span id="total">{{ items.length }}</span>.<TransitionGroup tag="ul" id="anim-list"> berisi <li v-for="item in items" :key="item">{{ item }}</li>. tag="ul" membuatnya dirender sebagai <ul id="anim-list">.Yang dicek:
#total berisi 2.#add-item diklik sekali, #total berisi 3.#anim-list memuat Item 3.<TransitionGroup.
