Currently facing an issue where selecting a tab does not refresh the input field in another component, causing data persistence. The data is stored in vuex, so I'm looking for a solution to refresh the component for usability. Appreciate any assistance or insights provided by everyone.
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li
v-for="item in tabselect"
:key="item.id"
class="nav-item"
role="presentation"
>
<button
:class="item.class"
:id="item.id"
data-bs-toggle="tab"
:data-bs-target="item.target"
type="button"
role="tab"
:aria-controls="item.control"
:aria-selected="item.selected"
@click="resetForm()"
>
{{ item.name }}
</button>
</li>
</ul>
<div class="tab-content" id="myTabprovince">
<div
class="tab-pane fade show active"
id="tablist1"
role="tabpanel"
aria-labelledby="tablist1-tab"
>
<province />
</div>
</div>
<div class="tab-content" id="myTabdistrict">
<div
class="tab-pane fade"
id="tablist2"
role="tabpanel"
aria-labelledby="tablist2-tab"
>
<district />
</div>
</div>
I'm relatively new to this and would appreciate any recommended resources for learning that can simplify understanding of the work.