Vue函数未更新数据变量

Question

I have set up a page using Vue and Greensock draggable to try and make a rectangle svg object draggable on the screen. I would like to know when the object has been dragged so I set a data variable hasDragged: false.

Using addEventListener on dragstart I set up a function that will update that variable to true when it detects that it has been dragged however it only updates the variable within the function and not the data variable that I need. The function is within another function in the updated lifecycle hook so I wondering if it is an issue with not being able to update this.hasDragged from within the second function.

I have tried many versions of the draggable addEventListener, trying to pass this through the functions, assign variables to this within each function, assigning the variable as a constant and a few other things.

new Vue({
      el: "#app",
      data: {
        hasDragged: false
      },
updated: function(hasDragged) {
        var petDrag = Draggable.create(".icon",{
                bounds:"#container"
              })[0];
              petDrag.addEventListener("dragstart", dragStart);     
              function dragStart () {            
              this.hasDragged = true; 
        }

The expected result is that the hasDragged variable at the Vue data level will be updated to true when the svg object is dragged. The actual result is that only the variable within the second function is updated to true but the Vue data variable remains false.

Answer 1

this inside function is not Vue instance. You can use arrow function for this:

new Vue({
  el: "#app",
  data: {
    hasDragged: false
  },
  updated: function () {
    var petDrag = Draggable.create(".icon", {
      bounds: "#container"
    })[0];
    petDrag.addEventListener("dragstart", () => {
      this.hasDragged = true
    });
  }
})

Answer 2

I'm a bit late to the party here but I just wanted to complement ittus' answer.

All GSAP constructors have a very complete set of event callbacks and in any one of those you can specify the scope inside that particular callback, which means you can set what this will be in there without directly adding an anonymous function (not that there is anything wrong with it). So in this case the code could be added in the Draggable constructor like this (I'm using $refs to get the actual DOM element in the code):

data: function () {
  return {
    blueDragged: false
  };
},
methods: {
  blueDragStarted: function () {
    this.blueDragged = true;
  },
},
mounted: function () {
  Draggable.create(this.$refs.blueElement, {
    type: "x, y",
    onDragStart: this.blueDragStarted,
    onDragStartScope: this // Vue component instance
  });
},

In this sample we take advantage of the context where the Draggable instance is being created. In that context this refers to the component instance and we pass that as a reference, ensuring that we have access to the component's state in the callback.

Again, there is actually nothing wrong with ittus' answer, just felt like complementing it with all the possibilities GSAP has to offer in this regard.

You can see GSAP Draggable's documentation here:

https://greensock.com/docs/Utilities/Draggable

Scroll down a bit to the section titled Config object properties

Live demo