Is it possible to make a Vue directive as an ES6 Class? I have been attempting to do so, but it doesn't seem to be working correctly.
Here is my code snippet:
import { DirectiveOptions } from 'vue';
interface WfmCarriageDirectiveModel {
onFocusDown(): void;
onKeyDown(event: Event): void;
resetInput(): void;
changeOrientation(event: Event): void;
getNumber(keyCode: number): void;
getDeflection(keyCode: number): void;
}
const ORIENTATION_VERT = 'vert';
const ORIENTATION_HOR = 'hor';
class WfmCarriageDirective implements DirectiveOptions, WfmCarriageDirectiveModel {
// The rest of the class definition...
}
export default WfmCarriageDirective;
After defining the directive, I added it in Main.ts:
import WfmCarriageDirective from '@/directives/wfmCarriageDirective';
Vue.directive('wfm-carriage', new WfmCarriageDirective());
Below is a snippet of my template where I am using the directive:
<div v-for="(plan, planKey) in planMap[employee.id]"
:class="[
`employees-cell ${plan.idEmployee}-${planKey}`,
{
'weekend': plan.isWeekend || plan.isHoliday,
'select': isSelectedCell(plan),
'vert': isSelectedCell(plan) && isVerticalOrientation(),
'hor': isSelectedCell(plan) && !isVerticalOrientation(),
'not-editable': !isEditable(plan)
}]"
@mousedown="selectCell(plan, roleId)"
tabindex="1"
v-wfm-carriage="{
plan: {value: plan, key: planKey},
rolesMap: rolesMap[roleId],
shifts: shiftsMap.byCode.shifts,
orientationCarriage,
onChangeOrientation,
controlAndInput
}"
>
However, during component initialization, I encounter an error saying "Cannot set property 'orientationCarriage' of undefined" and "Error in directive wfm-carriage bind hook: "TypeError: Cannot set property 'orientationCarriage' of undefined."
Can anyone guide me on how to access 'this' in the bind hook?