Vue + Laravel + Amchart: Selected value does not zoom to the selected country on the map

Question

I use Laravel where I have an Amcharts' map in vue and there is a html select too with countries' name. How can solve that if I select a country then it zoom to the country on the map AND if I click to a country on the map the selected name appear on the html select too? I could solve this with jquery (without vue) with added these lines:

$('#select').on('change', function() {

    var id = this.value;

    if ( '' == id ) {
        map.clickMapObject(map.dataProvider);
    }
    else {
        map.clickMapObject(map.getObjectById(id));
    }
});

map.addListener("clickMapObject", function (event) {
    document.getElementById("select").value = event.mapObject.id;
});

but I would like to do it in Vue and I do not really understand how should do it. Here is my index.html

<div id="titles">
 <div class="container map">
     <div class="row">

             <div class="col-md-9" id="mapdiv" style="width: 100%; height: 500px;"></div>
             <div class="col-md-3">
                 <div id="listed">
                     <ul >
                          <li v-for="task in filteredCountry">
                               @{{task.title}}         
                          </li>
                     </ul>
                 </div>
                 <select class="form-control" id="select" name="select" v-model="selectedCountry">
                     <option value="">Select a country</option>
                     <option  value="All" >All</option>
                     <option value="AF">Afghanistan</option>
                     <option value="AX">Åland Islands</option>
                         <!-- More countries -->
                  </select>
            </div>
         </div>
     </div>
  </div>

Vue:

$( document ).ready(function() { 

 const app = new Vue({
      el: '#titles',
      data: {
           tasks: {!! $tasks !!},
           selectedCountry: "All",
      },
      created() {
           AmCharts.makeChart( "mapdiv", {
               "type": "map",
               "zoomDuration": 0.1,
               "colorSteps": 100,

               "dataProvider": {
                   "map": "worldHigh", 
                   "getAreasFromMap": true,
                   "areas": <?php echo  '' . $countCountries . '' ?>
               },

               "areasSettings": {
                   "autoZoom": true,
                   "colorSolid": "#1B144B",
                   "selectedColor": "#1B144B",
                   "color": "#4DC5AC",
               },

               "valueLegend": {
                   "right": 100,
                   "minValue": "some",
                   "maxValue": "a lot!"
               }, 

           });
      },
      computed: {
           filteredCountry: function() {
                var app = this;
                var countries = app.selectedCountry;

                if(countries === "All") {
                     return app.tasks;
                } else {
                     return app.tasks.filter(function(task) {
                          return  (countries === 'All' || task.countries === countries);
                     });
                }
           }
      },
 });

 });

Answer 1

Simply assign your map to a variable on your Vue component:

this.map = AmCharts.makeChart( "mapdiv", {});

Then on your input/select you can add v-on:change="" attribute.

<select v-on:change="onChange()" v-model="selectedCountry">
    <!-- Countries here... -->
</select>

And on your component add a method called onChange :

methods: {
    onChange: function() {
        // Here do the logic about getting the mapObject you want
        // You probaby want to use `this.selectedCountry` from your select
        // and do something with the countries id.
        var mapObject = map.getObjectById(id);

        this.map.clickMapObject(mapObject);
    }
}

UPDATE:

Steps:

• this.map = AmCharts.makeChart( "mapdiv", { in created so that you can access outside.

• var mapObject = this.map.getObjectById(id); in onChange

• and just to be consistend with the data map: null, inside your data object.

https://jsfiddle.net/OzanKurt/4petgnau/22/