Proper way to implement a JavaScript class into VueJS

Question

Since my main component of one of my pages is getting a bit large and hard to read I'd like to outsource some of the methods into a frontend controller class. Here is my test class which is located in a subfolder controller/SporteventsController.js

export class SporteventsController{
    test(){
        return 'Printing test';
    }
}

I'm importing the class into my component as follows:

import {SporteventsController} from "./controller/SporteventsController.js";

for testing I just output the return value of the method test to the console through a method

    methods: {
        testmethod() {
            console.log(SporteventsController.prototype.test());
        }
    },

I was trying to find a more proper way online on how to import a standart ES6 class into a vuejs component, but without a satisfactory result.

The way I did it above is almost good, but why do I have to use the prototype and can't just use SporteventsController.test()?

Sovalina · Accepted Answer · 2019-07-04 11:13:37Z

4

If you want to define a class function for SporteventsController, you need to use the static keyword:

The static keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects. (source)

//SporteventsController.js

export default class SporteventsController {
  static test() {
    console.log("test");
  }
}

// component

<template>
  <div>
    <button @click="testFromController">click</button>
  </div>
</template>

<script>
import SporteventsController from "./controller/SporteventsController";

export default {
  methods: {
    testFromController() {
      SporteventsController.test()
    }
  }
}
</script>

answered Jul 4, 2019 at 11:13

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

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

1 Comment

Edwin Krause Over a year ago

yup, that's the one. That works geeat. I kind of answered this in my comment on alx.lzt 's answer. Thanks very much

Collectives™ on Stack Overflow

Proper way to implement a JavaScript class into VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related