切換Vue 3中v-for循環中按鈕的活動狀態
P粉046878197
P粉046878197 2023-08-27 09:44:54
0
1
469
<p>我正在Vue 3中建立一個過濾器頭部,在其中你可以選擇一個類別進行查看,因此你可以點擊切換過濾器的開關,如果你點擊另一個類別,它將取消選擇之前的活動類別,一次只能有一個或沒有活動類別。 </p> <p>我找到了一些範例,像是這個jsfiddle,它沒有可切換的按鈕(再次點擊取消選擇)並且沒有使用v-for循環。我相當有信心可以將其轉換為v-for循環,但我不知道如何輕鬆地進行切換和一次只能有一個活動類別的操作。 </p> <p>這是我的基本程式碼:</p> <pre class="brush:html;toolbar:false;"><button v-for="category in contentCategories" @click="" class="filter-button" > {{ category }} </button> </pre> <pre class="brush:js;toolbar:false;">const contentCategories = ["category 1", "category 2", "category 3"]; let list = contentStore.resources; const activeCategory = ""; const filteredList = list .filter((e) => e.category === activeCategory) .map((e) => { return e; }); </pre> <p>我認為我需要的行為是將活動類別儲存在<code>activeCategory</code>字串中,並將活動標籤應用於相應的按鈕,然後能夠如果再次點擊活動按鈕,則移除該<code>activeCategory</code>,或者如果點擊了不同的按鈕,則更改<code>activeCategory</code>。 </p> <p>如果這是一個簡單的解決方案,我很抱歉,因為我對Vue非常陌生。謝謝! </p>
P粉046878197
P粉046878197

全部回覆(1)
P粉588152636

使用組合 API

使用額外的引用進行追蹤的簡單解決方案

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
|

如果您想要實現多個選擇能力,則追蹤類別活動

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,关闭其他类别
|
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板