I'm attempting to execute a JavaScript function from an imported helper class within my Vue.js component. To do this, I import the helper class into my component and try using the mounted() lifecycle hook to call the function while passing a parameter to it.
Although I've explored some potential solutions, none of them have provided the desired outcome. Here are the sources I referenced:
Vue.js: Import class with function and call it in child component
This is what I have attempted so far. Any suggestions or ideas would be greatly appreciated.
Here is my helper class, myHelper.js:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
And here is my Vue component, MyComponent.vue:
<template>
<v-text-field :rules="[myRule]"></v-text-field>
</template>
<script>
import myHelper from './myHelper.js';
export default {
name: 'MyComponent',
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>