there is already a similar question regarding the question I am asking here,

The link : Leaflet How to set center map when click marker

But the difference is that instead 'click' I want to use tab-key ( on keyboard) and want map pan to marker and set position in the center. I am using leaflet map and using vue2 for it. I have googled a lot and couldn't find what I want to achieve. Any help from you is much appreciated, Thanks in Advance !

PS: I am using this example from here : https://vue2-leaflet.netlify.app/components/LIcon.html#demo

My vue file:

<div class="map-container" :style="getHeightWidth">
    <l-map ref="map" :zoom="zoom" :center="center">
     <l-tile-layer
      url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
      attribution='&copy; <a target="_blank" 
   href="http://osm.org/copyright">OpenStreetMap</a>'
  ></l-tile-layer>
        <l-marker v-for="(place, index) in places" :key="index" :lat-lng="[place.location.latitude, place.location.longitude]">
   <l-icon :icon-anchor="iconAnchor" :icon-size="iconSize" >
            <MapMarker :text="place.name" />
          </l-icon>

          <l-popup>
           <p>lol</p>
          </l-popup>
        </l-marker>
      </l-map>
    </div>

// and in data :

 data() {
    return {
      zoom: 3,
      center: [47.413220, -1.209482],
      iconAnchor: [32, 32],
      iconSize: [32, 32],
    };
  },

and then I have few CSS styles.