admin管理员组

文章数量:1432594

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
Share Improve this question edited Jun 15, 2016 at 7:59 Thomas Ayoub 29.5k16 gold badges98 silver badges147 bronze badges asked May 10, 2016 at 23:35 sesc360sesc360 3,28510 gold badges46 silver badges91 bronze badges 1
  • 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
Add a ment  | 

1 Answer 1

Reset to default 7

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

本文标签： javascriptVueJS Mixins MethodsStack Overflow

版权声明：本文标题：javascript - VueJS Mixins Methods - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745607485a2665919.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。