vue-draggable-resizable

vue-draggable-resizable copied to clipboard

codesandbox

As you can see in the sandbox, lock-aspect-ratio property works as expected. However, I'd like to change width/height programmatically with a different aspect ratio from the original one and then make lock-aspect-ratio active again. Any possible ways to do this? I wanna stick with the same lock-aspect-ratio when it comes to resizing.

setSize: function () {
  # something like this.$refs.vueDraggableResizeable.lockAspectRatio = false
  this.w = 300;
  this.h = 100;
  # something like this.$refs.vueDraggableResizeable.lockAspectRatio = true 
}

<vue-draggable-resizable
    :w="w"
    :h="h"
    :x="x"
    :y="y"
    @dragging="onDrag"
    @resizestop="onResizeStop"
    :parent="true"
    :lock-aspect-ratio="lock"
  >

data: function () {
    return {
      lock: true,
      w: 200,
      h: 200,
      x: 0,
      y: 0,
    };
  },

setSize: function () {
  this.lock = false;
  this.w = 300;
  this.h = 100;
  this.lock = true;
}

thought this works, but doesn't. if I set this.lock = true again, it constraints the aspect with initial one.

setSize: function () {
  # something like this.$refs.vueDraggableResizeable.lockAspectRatio = false
  this.w = 300;
  this.h = 100;
  this.$nextTick(function () {
      # something like this.$refs.vueDraggableResizeable.lockAspectRatio = true 
  });
}

it`s works😄😄😄😄