v-movable
v-movable copied to clipboard
v-movable parameters appear to not be reactive in Nuxt
I'm running this inside Nuxt v2.15.3. I'd like to be able to dynamically set the bounds limits of movable on mounted()
once I can get the size of the contents inside it, but at least when testing this with xLimit
below (default of 500), the limit doesn't appear to change. Similarly, I'd like to have disabled
be dynamic, but that's not working, either. The element is still draggable if disabled
is set to true after creation. Using the Vue inspector, it seems like altering disabled
after the fact actually creates a new instance of movable, but doesn't do anything with the old one.
What's the deal here? Is this component intentionally non-reactive?
<div ref="parentEl" class="image-frame">
<movable
class="top-bar"
target="parentEl"
:bounds="{ x: [0, xLimit], y: [0, 500] }"
:disabled="disabled"
@move="$emit('move', $event)"
@complete="$emit('drop', $event)"
>
... contents ...
</movable>
</div>