切換Vue 3中v-for循環中按鈕的活動狀態
P粉046878197
2023-08-27 09:44:54
<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>
使用組合 API
使用額外的引用進行追蹤的簡單解決方案
如果您想要實現多個選擇能力,則追蹤類別活動