Vue использование компонента класса AddEventListener и RemoveEventListener

Question

Я хочу реализовать перетаскиваемую линию, используя события mousedown, mousemove и mouseup.

В своей первой попытке я пытался использовать свойства arrow-functions-class-properties: https://codesandbox.io/s/example-1-15psm?fontsize=14&hidenavigation=1&theme=dark

Но свойство position в Test.vue кажется нереактивным. Не уверен, но я предполагаю, что это из-за ограничения this Vue:

Не используйте функции стрелок для свойства опций или обратного вызова, такого как created: () => console.log(this.a) или vm.$watch('a', newValue => this.myMethod()). Поскольку функция со стрелкой не имеет this, this будет обрабатываться как любая другая переменная и лексически просматриваться в родительских областях, пока не будет найдена, что часто приводит к ошибкам, таким как Uncaught TypeError: Cannot read property of undefined или Uncaught TypeError: this.myMethod is not a function.

Во второй попытке я попытался использовать стандартные методы класса: https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark

Это работает, за исключением тех случаев, когда связаны функции onMouseMove и onMouseUp в Test.vue являются анонимными. Я не могу их связать removeEventListener.

Итак, как правильно использовать addEventListener и removeEventListener в Vue компонентах класса?

Answer 1

Я переоценил свой код. Нет необходимости использовать arrow-functions-class-properties или определять контекст с помощью method.bind(this). Следующий код должен работать:

import { Vue, Component } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  position = 0;

  onMouseMove(e) {
    let position = this.position;
    position += e.movementY;
    this.position = position;
    console.log("onMouseMove", this.position);
  }

  onMouseUp() {
    console.log("onMouseUp", this.position);
    document.removeEventListener("mousemove", this.onMouseMove);
    document.removeEventListener("mouseup", this.onMouseUp);
  }

  onMouseDown() {
    console.log("onMouseDown", this.position);
    document.addEventListener("mousemove", this.onMouseMove);
    document.addEventListener("mouseup", this.onMouseUp);
  }
}

Рабочий пример: https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark