Call function from imported helper class in Vue.js component data

Question

I am trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.

I tried out some solutions from here, but didn't help: Vue.js: Import class with function and call it in child component

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:

export default myHelper {
    myHelperFunction(param) {
        return param;
    }
}

I have a 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>

Harshal Patil · Accepted Answer · 2019-06-18 11:56:20Z

2

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.

answered Jun 18, 2019 at 11:56

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call function from imported helper class in Vue.js component data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related