Instantiate a custom class in vue

Question

I'm trying to learn Vue with Babel and Webpack. I created a custom class and I already did the importation in my custom component, which should work because I can console.log it? Of course it's only nonesense in the log, but when i try to instantiate it, vue is crashing.

This is the code in the component file.

<script>
    import Data1 from '../model/Data1.js';

    let testData1 = new Data1();

    console.log(Data1);
    console.log("test");


    export default {
        name: 'Test2',
        props: {
            msg: String,
            test: String,
        },
        data: function () {

            return {
                Data2: ["1", "2"],
                OK: true,
                testData1: testData1,
            }
        }
    }
</script>

This is my custom class

class Data1 {
    constructor() {
        this.myArray = ["a", "b", "c"];
    }
}

export default {
    Data1
}

Did i miss something, or is the export wrong?

Answer 1

There are multiple issues in this code.

1. Imports doesn't require the use of .js

   import Data1 from '../model/Data1';

---

2. Initialize a class with brackets at the end (and it is a const)

   const testData1 = new Data1();

---

3. You may export the class without the use of an object.

   export default Data1;