Update X,Y from component method

Hi, I’ve the next code:

<button @click="InitPosition()">blla</button>
<vue-draggable-resizable
  v-if="DrillSelectorView"
  :parent="true"
  :x="testPosition['left']"
  :y="testPosition['top']"
  :w="460"
  :h="245"
  @dragstop="onDragstopDrillSelector"
  >
  <drill-selector/>
</vue-draggable-resizable>

data: () => ({
  testPosition: {
    left: 0,
    top: 684
  },
}),
mounted() {
  this.InitPosition();
},
beforeUpdate() {
  this.InitPosition();
},

initPosition: function() {
  this.testPosition= {
    left: 747,
    top: 1000
    };
}

Not the button or the beforeUpdate hook in working, only the mounted hook is working.

How should I update the init x,y location? Thank you

[TitanFighter]

@liquidvisual In your code when you drag, positions (x, y) do not change. Add x: {{ x }}, y: {{ y }} and you will see it. In order to fix it, you need @dragging="onDrag"

<template>
  <div id="app" :style="windowStyle">
    <button @click="resetPosition">reset x,y</button>

    x: {{ x }}, y: {{ y }}

    <vue-draggable-resizable class-name="test-class"
      :parent="true" :x="x" :y="y" :w="260" :h="145" @dragging="onDrag">
      <p>Drag me away then click reset (nothing happens)</p>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";

export default {
  name: "App",
  data: function () {
    return {
      x: 0,
      y: 0,

      windowStyle: {
        height: "884px",
        width: "1207px",
        position: "relative"
      }
    }
  },
  components: {
    VueDraggableResizable
  },
  methods: {
    resetPosition: function() {
      this.x = 0;
      this.y = 0;
    },
    onDrag(left, top) {
      this.x = left
      this.y = top
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test-class {
  border: 1px solid black;
}
</style>

[mauricius]

Thanks @TitanFighter, as always you’re definitely more helpful than me 😂