I am currently in the process of incorporating an IntersectionOberver that will update the url once the viewport transitions into a new section. I came across This thread and now endeavoring to apply it in vue 3 compositon api.
The script is being integrated into my index.vue file, which serves as the parent for all other vue components:
<template>
<div class="container">
<navbar></navbar>
<social-media-bar></social-media-bar>
<main>
<home></home>
<news></news>
<vision></vision>
<event-section></event-section>
<artwork></artwork>
<about></about>
<donate></donate>
<contact></contact>
<partners></partners>
</main>
<footer-component></footer-component>
</div>
</template>
<script setup>
import ... // component imports
import {onMounted, reactive} from "vue";
import router from "../js/router";
const state = reactive({
sectionObserver: null
})
const sectionObserveHandler = (entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
router.push({name: 'news', hash: '#news'})
}
}
}
const observeSections = () => {
const options = {
rootMargin: '0px 0px',
threshold: 0
}
state.sectionObserver = new IntersectionObserver(sectionObserveHandler, options)
const sections = document.querySelectorAll('.section')
sections.forEach(section =>{
state.sectionObserver.observe(section)
})
}
onMounted(() => {
observeSections()
})
</script>
Essentially, my current goal is to modify the url to .../#news when the viewport is scrolled to the next section.
Upon launching the web app, there are no error messages, but the url change does not take place when scrolling down to sections.
What could be causing this issue?
An observation at this point is that Phpstorm indicates at this line:
state.sectionObserver = new IntersectionObserver(sectionObserveHandler, options)
that:
Assigned expression type IntersectionObserver is not assignable to type UnwrapRef<null> ... Type IntersectionObserver is not assignable to type null extends ShallowRef<infer V> ? V : (null extends Ref<infer V> ? UnwrapRefSimple<V> : UnwrapRefSimple<null>) Type IntersectionObserver is not assignable to type null extends Ref<infer V> ? UnwrapRefSimple<V> : UnwrapRefSimple<null>
I have attempted changing state.sectionObserver to string, integer, or array, yet the error persists. However, it seems like the browser disregards these changes. Unsure whether this impacts the functionality.