I want to use a mixin within my VUEJS module:

Module

<script>
    var GoogleMaps = require('../mixins/GoogleMaps');

    export default {
        mixins: [GoogleMaps],
        events: {
            MapsApiLoaded: function(data) {
                GoogleMaps.initGISMap(data);
            }
        },
}
</script>

Mixin

export default {
    methods: {
        initGISMap(selector) {
            map = new google.maps.Map(selector, {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            });

            // Set initial Location and center map to this location
            initialLocation = new google.maps.LatLng(48.184845, 11.252553);
            map.setCenter(initialLocation);

            // Create a searchmarker
            searchMarker = createMarker();

            // Init Autoplete for GIS
            initAutoComplete();
        }
    }
}

But I get an error, that GoogleMaps.initGISMap is not a function. How do I use a method of a mixin within a ponent?

I want to use a mixin within my VUEJS module:

Module

<script>
    var GoogleMaps = require('../mixins/GoogleMaps');

    export default {
        mixins: [GoogleMaps],
        events: {
            MapsApiLoaded: function(data) {
                GoogleMaps.initGISMap(data);
            }
        },
}
</script>

Mixin

export default {
    methods: {
        initGISMap(selector) {
            map = new google.maps.Map(selector, {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            });

            // Set initial Location and center map to this location
            initialLocation = new google.maps.LatLng(48.184845, 11.252553);
            map.setCenter(initialLocation);

            // Create a searchmarker
            searchMarker = createMarker();

            // Init Autoplete for GIS
            initAutoComplete();
        }
    }
}

But I get an error, that GoogleMaps.initGISMap is not a function. How do I use a method of a mixin within a ponent?

• javascript
• vue.js

• i believe you need to reference the mixin with this. so in module this.GoogleMaps.initGISMAP(data) – vbranden Commented May 11, 2016 at 19:57

1 Answer 1

-- edit to correct mistake I made in interpreting your needs

When using mixins, you don't reference the methods MixinName.method() - it's just 'this' - those methods and properties returned by your mixin and are first order, so to speak, so they are bound to 'this'.

<script>
    var GoogleMaps = require('../mixins/GoogleMaps');

    export default {
        mixins: [GoogleMaps],
        events: {
            MapsApiLoaded: function(data) {
                this.initGISMap(data);
            }
        },
}
</script>