Vue.js 2 Web Development Projects

Implementing of the component

We will now use this new Scoped slot concept to display the information about the place associated with the Blog post.

1. Let's create a small component named PlaceDetails.vue in the components/content folder that displays the name and the address of a location:

      <script>      export default {        props: {          name: String,          address: String,        },        render (h) {          return <div class="details">            <div class="name"><i class="material-icons">place</i>                {this.name}</div>            <div class="address"> {this.address}</div>          </div>        },      }      </script>

Then we will implement the LocationInfo.vue component.

2. First the template, where we use either the googlemaps-place-details component, if we have a Google Maps placeId stored on the post, or else the googlemaps-geocoder ...