VueJS accessing externaly imported method in vue component

Question

I have an External Java Script File something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

and this is my vue component Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

I have two questions.

1. First how do I call this method inside the created life cycle hook to automatically run.
2. Second how do I call this method by hitting the button "Call External JS"

Of-cause I know to change the content of a div can easily done by vueJS without the help of pure JS external files. But I'm asking this question for clarify the concepts of how do I use external JS files inside the vue component.

Thank you.

Answer 1

A better solution would be to to use mixins:

import something from './something.js'
export default {
  mixins: [something]
}

now you can use whatever methods / computed you have exported in something.js, directly on this.

So, in your example, you have myFun() exported from something.js, and we can call it from Dashboard.vue like so:

<template>
    <div>
        <button type="button" name="button" @click="myFun">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
    import something from "./something.js"
    export default {
        mixins: [something],
        mounted(){
            this.myFun()
        }
    }
</script>

I hope I got the syntax right, but that's generally the idea of mixins.

Answer 2

1. You can call the imported something function under any lifecycle method you want. Here, I'd recommend using the mounted method. That triggers once all of the component's HTML has rendered.

2. You can add the something function under the vue component's methods, then call the function directly from the template.

<template>
    <div>
        <button type="button" name="button" @click="something">
            Call External JS
        </button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"

export default {
    mounted() {
        something()
    },
    methods: {
        something,
    },
}
</script>

Answer 3

Another approach would be to add the method in the data-block:

import something from "./something.js" // assuming something is a function

data() {
  return {
    // some data...
    something,
  }
}

Then in your template use it like:

<template>
    <div class="btn btn-primary" @click="something">Do something</div>
</template>

Answer 4

With your example, external javascript file something.js

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

You can parse it like object in your methods:{} in Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>