Togol keadaan aktif butang dalam gelung v-untuk dalam Vue 3

Question

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! 

Answer 1

Gunakan API Gabungan

Penyelesaian mudah untuk penjejakan dengan rujukan tambahan

const selectedCategory = ref("")
const contentCategories = ref(["category 1", "category 2", "category 3"]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="selectedCategory === category ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   selectedCategory.value = category
|

Jejaki aktiviti kategori jika anda ingin melaksanakan pelbagai keupayaan pemilihan

const contentCategories = ref([
  {
    name: "Category 1",
    active: false
  },
  ...
]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="category.active ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   找到类别然后设置 active = !active，关闭其他类别
|