Togol keadaan aktif butang dalam gelung v-untuk dalam Vue 3
P粉046878197
P粉046878197 2023-08-27 09:44:54
0
1
385

Saya sedang mencipta pengepala penapis dalam Vue 3 di mana anda boleh memilih kategori untuk dilihat, jadi anda boleh mengklik pada suis untuk menogol penapis dan jika anda mengklik pada kategori lain ia akan menyahpilih Kategori aktiviti sebelumnya, di sana hanya boleh menjadi satu atau tiada kategori aktif pada satu masa.

Saya menemui beberapa contoh, seperti jsfiddle ini, yang tidak mempunyai butang togol (klik sekali lagi untuk nyahpilih) dan tidak menggunakan gelung v-untuk. Saya agak yakin saya boleh menukar ini menjadi gelung v-untuk, tetapi saya tidak tahu cara melakukan penukaran dengan mudah dan hanya mempunyai satu kategori aktif pada satu masa.

Ini ialah kod asas saya:

 {{ kategori }}   
const contentCategories = ["kategori 1", "kategori 2", "kategori 3"]; biarkan senarai = contentStore.resources; const activeCategory = ""; const filteredList = senarai .filter((e) => e.category === activeCategory) .map((e) => { kembali e; });  

Tingkah laku yang saya rasa saya perlukan ialah menyimpan kategori aktif dalam rentetan activeCategory dan gunakan label aktif pada butang yang sepadan dan kemudian boleh mengalih keluarnya jika butang aktif diklik sekali lagi activeCategory, atau menukar activeCategory

Saya minta maaf jika ini adalah penyelesaian yang mudah kerana saya sangat baru menggunakan Vue. Terima kasih!

P粉046878197
P粉046878197

membalas semua (1)
P粉588152636

Gunakan API Gabungan

Penyelesaian mudah untuk penjejakan dengan rujukan tambahan

const selectedCategory = ref("") const contentCategories = ref(["category 1", "category 2", "category 3"]);  handleClick(category) { selectedCategory.value = category |

Jejaki aktiviti kategori jika anda ingin melaksanakan pelbagai keupayaan pemilihan

const contentCategories = ref([ { name: "Category 1", active: false }, ... ]);  handleClick(category) { 找到类别然后设置 active = !active,关闭其他类别 |
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!