Nuxt•3mo ago

Incorrect values calling getClientBoundingRect() on mounted

Hello people hope you're having a good day Basically i have a page and a component, in that component i want to get the position of 4 items and use them in the page to place an svg and connect these items In the component i have a defineModel to store the values like this

const elements = defineModel("elements");
onMounted(async () => {

  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
});

const elements = defineModel("elements");
onMounted(async () => {

  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
});

And on the main page

onMounted(async () => {


  const start = getLandingElements.value.first.getBoundingClientRect();
  const mid = getLandingElements.value.second.getBoundingClientRect();
....

onMounted(async () => {


  const start = getLandingElements.value.first.getBoundingClientRect();
  const mid = getLandingElements.value.second.getBoundingClientRect();
....

However at first i noticed that my elements were misplaced however after a hot reload (adding a console.log) they had a different position

first load
bottom: 774;
height: 72;
left: 303;
right: 707.734375;
top: 702;
width: 404.734375;
x: 303;
y: 702;

after hot reload
bottom: 614;
height: 72;
left: 303;
right: 695.46875;
top: 542;
width: 392.46875;
x: 303;
y: 542;

first load
bottom: 774;
height: 72;
left: 303;
right: 707.734375;
top: 702;
width: 404.734375;
x: 303;
y: 702;

after hot reload
bottom: 614;
height: 72;
left: 303;
right: 695.46875;
top: 542;
width: 392.46875;
x: 303;
y: 542;

From what i read it's because onMounted stores the values before DOM has finished loading so i tried using nextTIck like this on the onMounted hook but still no difference

  await nextTick(() => {
  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
  });

  await nextTick(() => {
  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
  });

onUpdated works however it causes an infinite loop so no bueno.. So how do i fix this issue ?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Incorrect values calling getClientBoundingRect() on mounted