Vue + Laravel + Amchart: выбранное значение не увеличивает выбранную страну на карте

Question

Я использую Laravel, где у меня есть карта Amcharts в vue, и есть выбор HTML с названием страны. Как можно решить, что если я выберу страну, то она увеличит масштаб до страны на карте И, если я нажму на страну на карте, выбранное имя появится в html select? Я мог бы решить это с помощью jquery (без vue) с добавлением этих строк:

$('#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;
});

но я хотел бы сделать это в Vue, и я не очень понимаю, как это сделать. Вот мой 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>

Вью:

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

Просто назначьте вашу карту переменной вашего компонента Vue:

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

Затем на ваш вход / выбор вы можете добавить v-on:change="" приписывать.

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

И на ваш компонент добавить метод под названием 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);
    }
}

ОБНОВИТЬ:

шаги:

• this.map = AmCharts.makeChart( "mapdiv", { в создан, так что вы можете получить доступ снаружи.

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

• и просто чтобы быть согласованным с данными map: null, внутри вашего объекта данных.

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