如何在 Vue 组件中使用 Vanilla Javascript Class？

Question

I have a laravel project which globally registers vue in the app.js file. Vue works in my project as I have it working in another part of my app. What makes this situation unique is I do not have somewhere, like a blade file, to pass my vue component through as a medium to be used. I have a vanilla js file and a vue component. I want to be able to use the methods created in my test.js file inside of my testing.vue file. I am simply trying to pass some data from my js to my vue and then console.log() it out to ensure the data is being passed properly. I do use npm run dev to compile assets. The code is pretty boiler plate at this point since my main objective right now is to just pass the data properly. I did confirm the import path as well and it is correct. Not sure why the console.log() is not showing in the browser. This is my current code:

Test.js

export class Test {
    testing() {
        console.log('this is a test');
    }
} 

Testing.vue

<template>
  <div>

  </div>
</template>

<script>
import {Test} from '../../js/Test';

export default {
  name: 'Testing',
  mounted() {
    console.log(Test.testing());
  }
}
</script>

Answer 1

You must create an instance of the Test class in order to use the method. In your Testing.vue file:

<template>
  <div>

  </div>
</template>

<script>
  import {Test} from '../../js/Test';

  export default {
    name: 'Testing',
    
    mounted() {
      // IMPORTANT to create instance of a class
      const myTestInstance = new Test();
      
      console.log(myTestInstance.testing());
    }
  }
</script>

The method testing() on class Test is not a static method and thus need object to invoke. Alternately, if you don't want to create object, then you can declare the method as static as shown below:

export class Test {
    static testing() {
        console.log('this is a test');
    }
}

You can then us it like this: Test.testing() .