vue / typescript / vue-awesome-swiper中的`this`方向

Question

代码

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 数据中---- nowIndex ，但是我有一个错误说“找不到名称 'nowIndex'”

我做什么： 我尝试在类中直接定义了一个公共值vue 到this，但它不起作用，错误还说“找不到名称'vue'”

结束： 我希望有人能看到这个并给我一个出路，觉得你很TAT。

Answer 1

nowIndex = 是一个错误，因为没有nowIndex 变量，并且nowIndex 类属性应始终称为this.nowIndex。

The documentation 状态：

请注意，事件处理程序中的这个关键字总是指向 Swiper 实例

正如this answer 解释的那样，这是在回调中依赖this 的库中的设计问题；一个函数不能同时使用组件 this 和 swiper this 上下文。这可以通过使用self = this hack 来解决，或者通过将函数签名绑定到其中一个上下文并使其接受另一个上下文作为参数来解决。

这可以通过this answer 中建议的帮助函数来完成：

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

或者通过使用 hack，在这种情况下 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;
        })
      }
    };
  }
}