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

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

2. There are lots of ways to do this. One way would be to add the something function under the vue component's data, then call the function directly from the template.

   Personally, I'd make a method on the Vue component which calls the function, then have your template's @click call that method. Doing it this way allows you to perform other actions or call other functions in the future if you wanted to. It also just looks a little cleaner to me.

With that in mind, you'd end up with this:

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

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

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

Answer 2

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 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

The methods which are reactive or coupled with the components(which are not API's) should be written in methods.I follow this practice. I have a scenario here to clarify your concepts:

JS file(one with containing function)filename - apis.js

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

I have used that function here in created hook. Thing is you can use it one of the user-defined methods.

Vue file(one which we will use that function from js file) - filename - infoform.vue

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

Answer 5

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>