Detect height change in component

Get Help
#1

hey, i have two components next to each other. The structure is the following:

<template>
  <b-container fluid>
    <b-row v-if="settings">
      <b-col xl="9">
        <ProductConfigurator :key="componentKey" />
      </b-col>

      <b-col xl="3">
        <ConfigurationSummary />
      </b-col>
    </b-row>
    <div v-else-if="fetchSettingsError">
      <Error v-bind:errorMessage="fetchSettingsError" />
    </div>
  </b-container>
</template>

The ConfigurationSummary contains a list that will be longer or shorter depending on the content, which is added dynamically.

Now when i add alot of items the height of the view will dynamically increase. But when that happens, i would like to notice the height change in the ProductConfigurator component. Is there any way to detect height changes and execute some custom code?

Thanks alot!

#2

为什么要检测高度呢？你让 子元素撑开父元素更好吧。

1 Like
#3

I’m going to assume that you have a good reason why you need to know the height, though in most cases you should be able to solve whatever problem you’re having using CSS instead. If you just want the two items to be the same height, for example, then I’d have thought you could achieve that with a bit of flexbox CSS.

To keep track of height changes you could use ResizeObserver:

https://developer.mozilla.org/en-us/docs/Web/API/ResizeObserver

1 Like
#4

The left component is a canvas which is used for BabylonJS.
When the size of the canvas changes, BabylonJS itself does not really notice it.
It results in the GUI and meshes beeing distorted.

So for window size changes its recommended to do the following, which works perferctly:

window.addEventListener(“resize”, () => this.engine.resize());

Tho when the window size stays the same but the component size changes, i need another solution.
I will try out the ResizeObserver, thanks alot!

#5

Hey Tarrew!
Have you found a cleaver way to test ResizeObserver’s callback?
I use it to do the same kind of job you’re describing here but, though it works well when running the app, testing it is a total pain! I can get the callback function to be covered by the tests… I can test the observe() function, but not the callback.
Found no usefull documentation on that topic anywhere…
Thanks,

#6

Are you trying to unit test this? If so, IMO, this would be better suited as an integration/e2e test. You should only unit test the function that gets called - which it seems you’re already doing.

This would likely explain why you haven’t been able to find any documentation on the topic.