Ошибка VueJS "Uncaught TypeError: this.sendDrag не является функцией" в mount ()

Question

Я не могу понять, почему this.sendDrag('started') возвращает эту ошибку:

"Uncaught TypeError: this.sendDrag не является функцией"

  methods: {
    sendDrag (val) {
      console.log(val)
    }
[...]



    mounted () {
        this.$nextTick(() => {
          this.$refs.flickity.on('dragStart', function () {
            this.stageDragging = true
            this.sendDrag('started')
          })

Что вызывает ошибку и как ее исправить?

Answer 1

Вам нужно захватить значение this в замыкании, потому что вы вызываете его из функции, которая имеет this.

Если бы вы использовали стрелку-лямбда-нотацию ()=>{} вместо function(), она автоматически захватила бы this. И это реальная разница между двумя обозначениями.

mounted () {
        this.$nextTick(() => {
          const that = this;
          this.$refs.flickity.on('dragStart', function () {
            that.stageDragging = true
            that.sendDrag('started')
          })