I am at a loss here and could really use some troubleshooting assistance.
Out of nowhere, I encountered reactivity issues after transferring code from my main/root App.vue file to a Home.vue "view" file.
Let's look at the original template syntax in my App.vue:
<div id="app">
<Header15 />
<router-view />
<UtilsBar />
<Footer15 />
</div>
</template>
The problematic portion of code defined in my Home.vue file is as follows:
<ul class="filter-list">
<li class="filter-list__litem" v-for="theme in themeFilterButtons" :key="theme.id">
<a class="filter-list__link" :class="{ 'on': theme.isActive }" :href="'#'+theme.id" @click.prevent="onFilterSelect('theme', theme.id)">
{{ theme.isActive }}<br />
{{ theme.text }}
</a>
</li>
themeFilterButtons is a computed array of objects.
computed: {
themeFilterButtons() {
return this.filters.themes.map((theme) => {
return { ...theme, isActive: false };
});
}
}
The new array references an array called themes from my filters object; it's structured in my data like this:
data() {
return {
filters: {
themes: [
{ id: 113, text: 'First World War' },
{ id: 214, text: 'Second World War' }
]
}
}
}
The onFilterSelect method linked to the click event eventually triggers another method, filterBtnSelToggle, which handles toggling a selected class (.on) by toggling the isActive property on the object.
To troubleshoot, I attempted to simply set the isActive property on the first array index to true. Despite setting it initially as false, clicking any button fails to change the value to true. The template view, using v-for, remains unchanged no matter how I adjust that value. Various attempts were made but failed to update the markup.
onFilterSelect(cat, id) {
// Attempting to set isActive: true on the initial array item.
this.themeFilterButtons[0].isActive = true; // < No effect.
this.$set(this.themeFilterButtons[0], 'isActive', true); // < Still does not work.
console.log('this.themeFilterButtons[0].isActive'); // Returns true.
}
Expected values are logged to the console, but the issue lies in updating the template (markup).
This functionality was previously operational and continues to function correctly when the logic is moved back to the primary App.vue file...
Any guidance would be greatly appreciated!