How to center the map on a marker on click on an item in the list of markers?

Question

Yandex maps

There is a main page component:

<template>
  <div class="container">
    <div class="ymaps">
      <div class="ymaps__controls">
        <LocationAdd
        />
        <LocationList
            v-bind:markers="markers"
        />
      </div>
      <LocationMap
          v-bind:markers="markers"
      />
    </div>
  </div>
</template>

<script>
  import LocationList from '../components/LocationList'
  import LocationAdd from '../components/LocationAdd'
  import LocationMap from '../components/LocationMap'

  export default {
    components: {LocationMap, LocationAdd, LocationList},
    name: 'Location',
    computed: {
      markers() {
        return this.$store.getters['marker/getAllMarkers']
      }
    },
    mounted() {
      this.$store.dispatch('marker/getAllMarkers')
    },
    methods: {
      getCoords(data) {
        this.coords = data
      }
    }
  }
</script>

<style scoped>
  .ymaps {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
  }
  .ymaps__controls {
    width: 300px;
  }
</style>

This component contains the following components:
- LocationAdd - for adding a marker to the list
- LocationList - for displaying a list of added markers, which in turn contains the LocationItem component for displaying a list unit, i.e. marker.
- LocationMap - respectively, the Yandex.map itself, by clicking on which the map is centered on the click area.
The question is, how to center the map by clicking on the marker in the list?
LocationItem looks like this:

<template>
  <b-list-group-item
      class="row"
      v-on:click="showMarker"
  >
    <div class="marker">
      {{marker.name}}
      <div class="marker__group">
        <span class="marker__coords">{{marker.coords[0]}}, {{marker.coords[1]}}</span>
      </div>
    </div>
    <div class="btn-group">
      <b-button v-on:click="editMarker(marker)" class="btn" variant="success">&#9998;</b-button>
      <b-button v-on:click="deleteMarker" variant="danger">&times;</b-button>
    </div>
  </b-list-group-item>
</template>

<script>
  export default {
    props: {
      marker: {
        type: Object,
      }
    },
    methods: {
      editMarker(marker) {
        console.log(marker)
      },
      deleteMarker() {
        this.$store.dispatch('marker/deleteMarker', {
          id: this.marker._id
        })
      },
      showMarker(e) {

      }
    }
  }
</script>

<style scoped>
  .row {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .marker {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .marker__coords {
    font-size: 12px;
  }
  .btn {
    display: inline-block;
  }
</style>

I understand that you need to pass the coordinates to the LocationMap component and somehow center the map along these coordinates, but I just can’t. The map component itself:

<template>
  <yandex-map
      v-if="coords"
      :coords="coords"
      :zoom="5"
      @click="onClick"
  >
    <ymap-marker
        v-for="n in markers"
        :key="n._id"
        :marker-id="n._id"
        :coords="n.coords"
    ></ymap-marker>
  </yandex-map>

</template>

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

  export default {
    props: ['markers'],
    components: {
      yandexMap,
      ymapMarker,
    },
    data: () => ({
      coords: null,
      settings: {
        apiKey: '7f037fcc-21f0-4c1b-ad6e-1f292ef45a2f',
        lang: 'ru_RU',
        coordorder: 'latlong',
        version: '2.1'
      },
    }),
    methods: {
      onClick(e) {
        this.$store.dispatch('marker/setCoords', {
          coords: e.get('coords')
        })
        this.coords = e.get('coords')
      },
    },
    async mounted() {
      await loadYmap({...this.settings, debug: true})

      ymaps.geolocation.get().then(res => {
        this.coords = res.geoObjects.position
      })
    }
  }
</script>

<style scoped>
  .ymap-container {
    width: 750px;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
</style>

Answer 1

The coords property is to move from the component with the map to vuex. Then in the list element component, you can do something like @click="$store.commit('setCoords', marker.coords)".