Vue.js 2 Web Development Projects

Click handler

We also need to handle the clicks on the map to create a new blog post.

1. Add the click handler to the map:

      <googlemaps-map        :center="center"        :zoom="zoom"        :options="mapOptions"        @update:center="setCenter"        @update:zoom="setZoom"        @click="onMapClick"      >

2. Add the corresponding method that dispatches the setDraftLocation action with the eventual latLng (the position) and placeId from Google Maps:

      onMapClick (event) {        this.setDraftLocation({          position: event.latLng,          placeId: event.placeId,        })      },

You can now try to click on the map--two mutations (one to create the draft and one to update its location) should be recorded in the dev tools.