`this` направление в vue / typcript / vue-awesome-swiper - PullRequest
Новая
       11

`this` направление в vue / typcript / vue-awesome-swiper

0 голосов
/ 29 октября 2019

Код 


export default class Random extends Vue {
  // data
  public nowIndex: number = -1;
  public swiperOption: Object = {
    slidesPerView: 6,
    slidesPerGroup: 6,
    loopFillGroupWithBlank: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    on: {
      click: function(this: any): void {
        nowIndex = this.clickedSlide.dataset.key;
      }
    }
  };
}

Вопрос: Нажмите на событие this события, прямо к элементу Swiper, мне нужно получить ключ, чтобы сказать мне, на каком из них нажимали, и я хочу сохранить этот ключв vue data ---- nowIndex, но у меня возникла ошибка: «Не удается найти имя nowIndex»

Что я делаю: я пытаюсь определить общедоступное значение vue прямо вthis в классе, но это не работает, ошибка также говорит "Не удается найти имя 'vue'"

Конец: Я надеюсь, что кто-то может увидеть это и дать мне способЯ думаю, ты очень любишь ТАТ.

1 Ответ

0 голосов
/ 29 октября 2019

nowIndex = является ошибкой, потому что нет переменной nowIndex, а свойство класса nowIndex всегда должно указываться как this.nowIndex.

В документации говорится:

Обратите внимание, что это ключевое слово в обработчике событий всегда указывает на экземпляр Swiper

Поскольку этот ответ объясняет, что это проблема проектирования библиотеки, которая полагаетсяна this в обратных вызовах;функция не может использовать контексты компонента this и swiper this одновременно. Эту проблему можно решить либо с помощью взлома self = this, либо связав сигнатуру функции с одним из этих контекстов и заставив ее принять другой в качестве параметра.

Это можно сделать с помощью вспомогательной функции, как предложено в этот ответ : 

function contextWrapper(fn) {
    const self = this;

    return function (...args) {
        return fn.call(self, this, ...args);
    }
}

export default class Random extends Vue {
  nowIndex: number = -1;
  swiperOption?: any;

  created() {
    this.swiperOption = { /*...*/
      on: {
        click: contextWrapper((swiperInstance: any) => {
          this.nowIndex = swiperInstance.clickedSlide.dataset.key;
        })
      }
    };
  }
}

Или, используя взлом, в этом случае this семантика идет не так: 

export default class Random extends Vue {
  nowIndex: number = -1;
  swiperOption?: any;

  created() {
    const self = this;

    this.swiperOption = { /*...*/
      on: {
        click(this: any) {
          self.nowIndex = this.clickedSlide.dataset.key;
        })
      }
    };
  }
}
...