Is there a way to store a reference of a jQuery element in the Vue 'data' object without causing TypeScript errors?
Any suggestions on how to resolve this issue?
[EDIT] I managed to work around the TypeScript error by setting a non-existing jQuery element as the default value for the property. This tricked TypeScript into recognizing the prop as a jQuery element, but it still feels like a hacky solution...
Any assistance is greatly appreciated!
var x = Vue.extend({
data: function () {
return {
_componenentDidMount: false,
_myJQueryElement: undefined,
}
},
mounted: function () {
// marking the component as mounted
this._componenentDidMount = true; // no issues here
// attempting to set the '_myJQueryElement'
this._myJQueryElement = $('.z-vertical-scrollbar'); // error here
},
methods: {
B() {
// accessing property without errors
var didMount = this._componenentDidMount; // no problems
// attempting to perform jQuery operations with the element
var top = this._myJQueryElement.offset().top; // error here
}
}
}
(this is how the code appears on the screen)
https://i.sstatic.net/9dlCY.png
[EDIT 2] (the 'fixed' version - making TypeScript recognize it as a jQuery element by referencing a non-existing element)...
https://i.sstatic.net/QhsL7.png
[EDIT 3] (yet another differently 'fixed' version - properly defining properties in TypeScript)... - although I had to resort to using 'any' due to jQuery returning a JQuery | undefined which is challenging to handle...