frames/components/Ui/Search/Address.vue

<template>
  <div>
    <v-text-field
      v-model="text"
      type="text"
      name="search-city"
      class="search-bar"
      outlined
      :label="$t('where') + ' ?'"
      autocomplete="off"
      append-icon="mdi-crosshairs-gps"
      @change="$emit('change', $event)"
      @click:append="geolocalizeUser"
    />

    <v-snackbar :value="errorMsg !== ''">
      {{ errorMsg }}
      <template #action="{ attrs }">
        <v-btn text v-bind="attrs" @click="errorMsg=''">
          {{ $t('close') }}
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      latitude: null,
      longitude: null,
      text: '',
      errorMsg: ''
    }
  },
  methods: {
    geolocalizeUser () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.latitude = position.coords.latitude
            this.latitude = position.coords.longitude
            this.text = this.$t('my_position')
          },
          () => {
            this.errorMsg = this.$t('geolocation_error')
          }
        )
      } else {
        this.errorMsg = this.$t('geolocation_not_supported')
      }
    }
  }
}
</script>


<style>
.v-input__control {
  height: 56px;
}
</style>