script import in wrong order, Function not defined

Asked

Viewed 81 times

2

I have a Vue Component (Map.vue):

<template>
...
</template>

<script>
import '../../assets/js/map.js'

export default {
    name: 'home',
    data () {
        return {
            init_data: {},
        }
    },
    created: function() {
         this.init_data = window.get_init_data(this.view, function(response) {
               document.title = response.body.page_title;
               init_map(some_arguments); // erro aqui
         });
    }
}
</script>

map js.:

const key = ******;
function init_map(some_args) {
    ...
}

Error:

[Vue warn]: Error in created hook: "Referenceerror: init_map is not defined"

And in fact, inspecting that the source code the function is being called before its signature.

Note: I don’t want to include map.js in my webpack entries because I will only need this script in one component.

javascript vue.js webpack import

  • the problem is that the created: function(){} wheel before map.js is loaded. you will need to find another method that runs after map.js is loaded, I imagine it would be something like ready: function(){}

1 answer

2

I ended up making:

Map.:

<script>
import init_map from '../../assets/js/map.js';
...
</script>

map js.

const key = ******;
export default function init_map(some_args) {
    ...
}

Browser other questions tagged javascript vue.js webpack import

You are not signed in. Login or sign up in order to post.