Функция Vue не обновляет переменную данных - PullRequest
Новая
       289

Функция Vue не обновляет переменную данных

0 голосов
/ 25 июня 2019

Я создал страницу, используя перетаскиваемые объекты Vue и Greensock, чтобы попытаться сделать прямоугольный объект SVG перетаскиваемым на экране.Я хотел бы знать, когда объект был перетащен, поэтому я установил переменную данных hasDragged: false.

Использование addEventListener на dragstart Я настроил функцию, которая будет обновлять эту переменную до true, когда обнаружит, что она была перетащена, однако она обновляет только переменную внутри функции, а не переменную данных, которая мне нужна.Эта функция находится в другой функции в обновленном хуке жизненного цикла, поэтому мне интересно, если это проблема с невозможностью обновить this.hasDragged из второй функции.

Я пробовал много версий перетаскиваемого addEventListener,пытаясь передать это через функции, назначьте переменные внутри каждой функции, назначив переменную как константу и несколько других вещей. 

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.

Ответы [ 2 ]

4 голосов
/ 25 июня 2019

this внутри функции не является экземпляром Vue. Вы можете использовать функцию стрелки для этого: 

new Vue({
  el: "#app",
  data: {
    hasDragged: false
  },
  updated: function () {
    var petDrag = Draggable.create(".icon", {
      bounds: "#container"
    })[0];
    petDrag.addEventListener("dragstart", () => {
      this.hasDragged = true
    });
  }
})
0 голосов
/ 09 июля 2019

Я немного опоздал на вечеринку здесь, но я просто хотел дополнить ответ ittus.

Все конструкторы GSAP имеют очень полный набор обратных вызовов событий, и в любом из них вы можете указатьобласть действия в этом конкретном обратном вызове, что означает, что вы можете установить, что будет this, без непосредственного добавления анонимной функции (не то, чтобы с ней что-то не так).Таким образом, в этом случае код можно добавить в конструктор Draggable следующим образом (я использую $refs для получения фактического элемента DOM в коде): 

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

В этом примере мы беремПреимущество контекста, в котором создается экземпляр Draggable.В этом контексте this относится к экземпляру компонента, и мы передаем его как ссылку, гарантируя, что у нас есть доступ к состоянию компонента в обратном вызове.

Опять же, на самом деле нет ничего плохого в ответе ittus,Мне просто хотелось дополнить его всеми возможностями, которые GSAP может предложить в этом отношении.

Документацию GSAP Draggable можно посмотреть здесь:

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

Прокрутите немного внизв раздел под названием Свойства объекта конфигурации

Демонстрационная версия

...