Level 2
You need to use accordions.value for accessing the ref value.
https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Nov 8, 2022
4
Level 13
Find offsetTop of element with Vue3 Composite
Anybody an idea how to get the offsetTop of an element in Vue3 with the composite API? Like this version of Vue2?
goto(refName) { var element = this.$refs[refName]; var top = element.offsetTop; window.scrollTo(0, top); }
i have in my setup():
const accordions = ref([]);
it is filled by elements of a v-for. I could get the proxy out of the array later. But not the offset:
const element = accordions[region]; console.log("Region: " + region); //got the name console.log("Element: ", element); // Proxy of element const top = element.offsetTop; console.log("OffsetTop: " + top); // !!! Undefined window.scrollTo({ top: top, left: 0, behavior: "smooth", });
Level 47
in my opion , you can use vanilla js code inside a composite function. for example , give the element an id or a class , get the element by id or class, then you can use its offsets.
btw , please surround your code with ```
Level 1
I think you have to use accordions.value for accessing.
Level 13
I found a solution. I think the trick was, after some researches, that you have to proceed at the nextTick. otherwise the element is always undefined.
async function scrollPageTo(navEl) { let element = document.querySelector(#${navEl}); await nextTick(); element.scrollIntoView({ behavior: "smooth" }); }
I also added a data Attribute:
:data-id="index"
Then i could select the element by the querySelector. Not directly the same i would like to have with the ref approach but it works in this scenario.
Please or to participate in this conversation.