One example scenario involves setting specific elements to have an active class by assigning the property "active" as true (using v-bind:class). This property is modified within a foreach loop, after certain conditions are met, through the method "handleScroll".
Everything works fine when I directly call "handleScroll" in the created lifecycle.
<template>
<div class="c-sidebar">
<p
v-for="(sidebarItem, index) in sidebarItems"
v-bind:key="index"
v-bind:class="{ 'active': sidebarItem.active }"
>
{{ sidebarItem.label }}
</p>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import {SidebarItem, SidebarNavItem} from "../../Interfaces";
@Component
export default class Sidebar extends Vue {
sidebarItems: SidebarItem[];
public created() {
this.sidebarItems = [
{
label: "First item",
active: true
},
{
label: "Second item",
active: false
}
];
this.handleScroll();
}
public handleScroll() {
this.sidebarItems.forEach((sidebarItem: SidebarItem, index) => {
if (index == 1) {
sidebarItem.active = true;
} else {
sidebarItem.active = false;
}
});
}
}
</script>
However, if I trigger "handleScroll" from inside a window event listener, the reactivity is lost.
Swapping out:
public created() {
...
this.handleScroll();
}
for
public created() {
...
window.addEventListener("scroll", this.handleScroll);
}
may execute the method but causes reactivity issues with the template.
Inquiry: What is the correct approach to updating these properties in a global window event and then applying them back to the view?