Toggle active state of button in v-for loop in Vue 3
<p>I'm creating a filter header in Vue 3 where you can select a category to view, so you can click on a switch to toggle the filter and if you click on another category it will deselect the previous activity Categories, there can only be one or no active categories at a time. </p>
<p>I found some examples, like this jsfiddle, which doesn't have a toggle button (click again to deselect) and doesn't use a v-for loop. I'm fairly confident I can convert this into a v-for loop, but I don't know how to easily do the switching and having only one active category at a time. </p>
<p>This is my basic code: </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>The behavior I think I need is to store the active category in the <code>activeCategory</code> string and apply the active label to the corresponding button and then be able to remove it if the active button is clicked again The <code>activeCategory</code>, or changes the <code>activeCategory</code> if a different button is clicked. </p>
<p>I'm sorry if this is a simple solution as I'm very new to Vue. Thanks! </p>