`这是vue/typescript/vue超级swiper中的“方向”
代码`这是vue/typescript/vue超级swiper中的“方向”,typescript,vue.js,swiper,Typescript,Vue.js,Swiper,代码 导出默认类随机扩展Vue{ //资料 公共索引:编号=-1; 公共开关选项:对象={ slidesPerView:6, 幻灯片分组:6, loopFillGroupWithBlank:true, 导航:{ nextEl:“.swiper按钮下一步”, prevEl:“.swiper按钮prev” }, 关于:{ 单击:函数(此:任意):无效{ nowIndex=this.clickedSlide.dataset.key; } } }; } 问题: 单击事件的此直接指向Swiper元素,
导出默认类随机扩展Vue{
//资料
公共索引:编号=-1;
公共开关选项:对象={
slidesPerView:6,
幻灯片分组:6,
loopFillGroupWithBlank:true,
导航:{
nextEl:“.swiper按钮下一步”,
prevEl:“.swiper按钮prev”
},
关于:{
单击:函数(此:任意):无效{
nowIndex=this.clickedSlide.dataset.key;
}
}
};
}
问题:
单击事件的此
直接指向Swiper
元素,我需要它获取一个键来告诉我正在单击哪个,我想将此键保存在vue数据--nowIndex中,但我遇到一个错误,错误是无法找到名称'nowIndex'
我所做的:
我尝试在类中定义一个公共值vue
直接指向this
,但它不起作用,错误还显示“找不到名称“vue”
完:
我希望有人能看到这一点,并给我一条出路,我想你非常感谢。
nowIndex=
是一个错误,因为没有nowIndex
变量,nowIndex
类属性应该始终被称为this.nowIndex
国家:
请注意,事件处理程序中的此关键字始终指向Swiper实例
正如所解释的,这是一个库中的设计问题,它依赖于回调中的this
;函数不能同时使用组件此
和swiper此
上下文。这可以通过使用self=This
hack来解决,或者通过将函数签名绑定到其中一个上下文并使其接受另一个作为参数来解决
这可以使用帮助器函数完成,如中所示:
或者通过使用黑客,在本例中,这个
语义出错:
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;
})
}
};
}
}
我试着在课堂上直接定义一个公共价值vue-你是什么意思?非常感谢你解决了我的问题。有一次我在课堂上尝试了第一个解决方案
self=this
,比如public vue=this
,但是它不起作用,你能教我这个代码在哪里工作,如何工作吗?威尔:使用suger语法,我几乎忘记了构造函数,这是一个很大的错误,再次感谢:)抱歉打扰你,我在编码时发现另一个问题,bindandcasscontext
函数绑定中的this
直接指向类Random
notVueComponent
,因此如果我更新数据,查看not update,我找不到一种方法将VueComponent this
放在这个函数中。您没有指定如何准确地执行类继承,但我想这将与。Vue类的问题在于它们不是真正的OOP,它们只是组件定义的语法。因此,我之前关于构造函数的评论与此无关。您需要在created
中执行此操作,这就是self=this
将发生的地方。我更新了帖子。很抱歉这个模糊的问题,答案是完美的解决了我的问题,但是VueComponent
和Random
之间的关系仍然让我困惑,@Component
装饰师是否在他们之间做了一些工作?
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;
})
}
};
}
}