javascript - Vue function not updating data variable - Stack Overflow

admin管理员组

文章数量:1401623

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.

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.

• javascript
• vue.js
• gsap

Share Improve this question Follow asked Jun 25, 2019 at 2:03 dylanlarriveedylanlarrivee 4311 silver badge66 bronze badges 1

• You should define the dragStart method inside the methods param of the Vue ponent. That way the this inside that function will point to the Vue instance. Right now is pointing to another context. – nahuelhds Commented Jun 25, 2019 at 2:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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
    });
  }
})

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

All GSAP constructors have a very plete 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 ponent instance
  });
},

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

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

You can see GSAP Draggable's documentation here:

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

Scroll down a bit to the section titled Config object properties

Live demo

本文标签： javascriptVue function not updating data variableStack Overflow