Handle parent component width and height change

[gsaada]

  <div v-bind:style="windowStyle">
    <vue-draggable-resizable
      v-if="true"
      :parent="true"
      :w="1120"
      :h="500"
    >
      <dashboard/>
    </vue-draggable-resizable>
 </div>

After changing windowStyle the drag is still blocked by the prev windowStyle size.

How can I sync the children with the new size? Thank you

[mauricius]

Parent costraints are calculated only during component mount. If you want to update them you can trigger a resize event.

See https://github.com/mauricius/vue-draggable-resizable/issues/133#issuecomment-446781986

[gsaada]

@mauricius Thank you for your answer. This will work only on the development branch? What can I do if I don't use dev branch?

[StreakingMan]

<div v-if="parentShow"  v-bind:style="windowStyle">
    <vue-draggable-resizable
      v-if="true"
      :parent="true"
      :w="1120"
      :h="500"
    >
      <dashboard/>
    </vue-draggable-resizable>
 </div>

watch: {
    windowStyle() {
       this.parentShow = false;
       this.parentShow = true;
    }
}

@gsaada it works for me. actually it makes component mount again, the parent element avoid re-render so everything looks normal

[misland]

@MaxYYYYY for me,it doesn't work,because re-mount the components need some time,so I change the code like this:

this.parentShow = false;
      let _this = this;
      setTimeout(() => {
        _this.parentShow = true;
      }, 100);

[Adhders]

Parent costraints are calculated only during component mount. If you want to update them you can trigger a resize event.

See #133 (comment)

Dear mauricius, I have met this parent size change problem recently ,. do you have other elegant way except 'window.dispatchEvent(new Event('resize'))' ?

[seekingtheoptimal]

dispatching resize event is a hack and can cause problems (infinite loops) if you are already reacting in a resize handler