Usando mapbox-gl-js 2.8.2
Para configurar el mapa, tengo que obtener datos de una API. Dado eso, tengo que iniciar mapbox en el then y, dado que necesito el objeto de mapa en mi componente vue, también tengo que iniciar Vue en el then .
Pero como hago eso, cada vez que llamo a una función en el objeto del mapa (es decir map.setFilter() ), tengo TypeError: map.setFilter is not a function .
El código se ve así:
<head> <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet'/> </head> <body> <div id="map"></div> <app :map="this.map"></app> <script> Vue.component('app',{ props:['map'], template: ` <div id="app"> <button v-on:click="logFilter"></button> </div> `, data:function(){ return {}; }, methods:{ logFilter:function(){ console.log(this.map.setFilter('land',["any"])) } } } </script> <script> fetch('some/api/url') .then((res)=> { res.json() .then(cityData=>{ mapboxgl.accessToken = 'my_token' let map = new mapboxgl.Map({ container: 'map', center: cityData.location, zoom: cityData.zoom }) const vue = new Vue({ el : 'app', data:{ map : map, } }); }); }); </script> </body> Cuando se hace clic en el botón, la consola mostrará el error TypeError: map.getStyle is not a function .
Este problema ha ocurrido desde que hice la declaración de vue en el then así que supongo que es un problema con las funciones vue y async, pero no puedo encontrar nada al respecto en línea.