How to get yandex marker in vue-yandex-maps?

Question

Vue.js

I ran into such a problem, I use the vue-yandex-maps

component to work with the yandex map. This is how the output of the map and its labels looks like:

<template>
  <ul>
    <li
      v-for="object in objects"
      :key="object.id"
      @mouseleave="onMouseleaveObject"
      @mouseenter="onMouseenterObject"
    >
      {{ object.title }}
    </li>
  </ul>

  <yandex-map
    ref="map"
    :settings="map.settings"
    :controls="map.controls"
    :coords="mapCoords"
    :show-all-markers="true"
  >
    <ymap-marker
      v-for="marker in markers"
      :key="marker.id"
      :marker-id="marker.id"
      :coords="marker.coords"
      :hint-content="marker.title"
      :icon="map.markerIcon"
      @mouseenter="onMouseenterMarker"
      @mouseleave="onMouseleaveMarker"
    />
  </yandex-map>
</template>

<script>
  import { yandexMap, ymapMarker } from 'vue-yandex-maps';

  const MAP_MARKER_DEFAULT = require('@/assets/images/map-markers/marker-circle.svg');
  const MAP_MARKER_ACTIVE = require('@/assets/images/map-markers/marker-circle-active.svg');

  export default {
    components: {
      yandexMap,
      ymapMarker
    },
    data: () => ({
      map: {
        settings: {
          apiKey: 'тут ключ',
          lang: 'ru_RU',
          coordorder: 'latlong',
          version: '2.1'
        },
        controls: [],
        markerIcon: {
          layout: 'default#image',
          imageHref: MAP_MARKER_DEFAULT,
          imageSize: [48, 48],
          imageOffset: [-24, -48]
        }
      }
    },
    methods: {
      onMouseenterObject (id) {
        console.log('onMouseenterObject');
      },
      onMouseleaveObject () {
        console.log('onMouseleaveObject');
      },
      onMouseenterMarker (event) {
        const marker = event.get('target');

        this.setMarkerIcon(marker, MAP_MARKER_ACTIVE);
      },
      onMouseleaveMarker (event) {
        const marker = event.get('target');

        this.setMarkerIcon(marker, MAP_MARKER_DEFAULT);
      },
      setMarkerIcon (marker, icon) {
        marker.options.set('iconImageHref', icon);
      }
    }
  };
</script>

What is the problem, at the moment, I need to highlight the marker on the map when hovering over the list item with the mouse.
For the labels themselves on the map and hovering over them, I sort of did it. But I have a problem with the list. I’ve been googling for several hours, digging the dock, but I can’t figure out how to turn to the marker.

Tried in different ways.
In the dock, it seems like you can get markers through the geoObjects property and use the get method , which, judging by the dock, takes an argument in the form of a marker index.
In the onMouseleaveObject method I tried this:

onMouseleaveObject (index) { // В шаблоне я передавал index
  const marker = this.$refs.map.mayMap.geoObjects.get(index);

  console.log(marker); // undefined

  this.setMarkerIcon(marker, MAP_MARKER_ACTIVE);
}

No sense. Please tell me how to solve the problem?

Answer 1

No need to manipulate markers directly. Store the index of the active marker in the component data, set its value on enter/leave events, depending on which you can pass icon images to the marker component instances:

data: () => ({
  map: {
    activeMarkerIndex: null,
    markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
    ...

<ymap-marker
  v-for="(n, i) in markers"
  :icon="{
    ...map.markerIcon,
    imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
  }"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

<li
  v-for="(n, i) in objects"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

https://jsfiddle.net/bw5eym2n/