[英]Call function from imported helper class in Vue.js component data
I am trying to call a JavaScript
function
from an imported helper class
in my Vue.js
component
. 我正在尝试从Vue.js
component
的导入的帮助器class
调用JavaScript
function
。 I import
my helper class
in my component
and try to use mounted()
to call it and pass a paramter to the helper class
. 我import
帮助程序class
import
component
并尝试使用mounted()
调用它,并将参数传递给帮助程序class
。
I tried out some solutions from here, but didn't help: Vue.js: Import class with function and call it in child component 我从这里尝试了一些解决方案,但没有帮助: Vue.js:使用函数导入类并在子组件中调用它
https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266 https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266
This is what I tried so far, any ideas? 这是我到目前为止尝试过的,有什么想法吗?
I have a helper class myHelper.js
: 我有一个帮助器类myHelper.js
:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
I have a Vue
component MyComponent.vue
: 我有一个Vue
组件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>
You are not really exporting the class. 您并不是真的要导出类。 It is a plain object. 这是一个普通的对象。 To export a class instead of an object do this: 要导出类而不是对象,请执行以下操作:
// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}
Also, you do not need: 另外,您不需要:
components: {
myHelper,
},
Rest of the code stays the same. 其余代码保持不变。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.