Use data from axios get as prop for another Vue file

Question

I have some code which resolves the ip address of a computer to a lat / long, like so

ip_resolve.vue

<script>
const axios = require('axios').default;
const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmi
export default {
  name: 'ip',
  props: {
    ip: String,
    lat: String,
    long: String
  },
  mounted () {
    axios.get('https://www.cloudflare.com/cdn-cgi/trace')
    .then(response => (
        this.ip = ipRegex.exec(response.data)[1]
    )
    .then(
        axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')
        .then( response => (
            this.lat = response.data.latitude,
            this.long = response.data.longitude
            )
        )
    )
    )
  }
}
</script>

I want to "return" the lat / long to App.Vue, where it will pass Lat/Long as props to "Weather.js"

App.Vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ip></ip>
    <Weather lat={{lat}} long={{long}} />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'
import ip from './components/ip_resolve.vue'

export default {
  name: 'App',
  components: {
    Weather,
    ip
  }
}
</script>

I've read a little bit about $emit, but I am unfamiliar with the design paradigm and don't know how to implement it. Can someone offer me some best practices here?

Thanks,

Answer 1

In your ip_resolve.vue use this to emit the event after getting the data from axios:

this.$emit('response', {
  lat: response.data.latitude,
  long: response.data.longitude
}

And then in your App.vue :

<ip @response="onResponse"></ip>
<Weather :lat="lat" :long="long" />

and inside <script> in App.vue :

export default {
  name: 'App',
  data() {
    return {
      lat: 0,
      long: 0
    }
  },
  components: {
    Weather,
    ip
  },
  methods: {
    onResponse($event) {
      this.lat = $event.lat
      this.long = $event.long
    }
  }
}

Answer 2

You're nearly there.

This is how you can emit the data on your ip component:

<script>
const axios = require('axios').default;
const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmi
export default {
  name: 'ip',
  props : {
    ip: String
  },
  mounted () {
    axios.get('https://www.cloudflare.com/cdn-cgi/trace')
    .then(function(response) {
       this.ip = ipRegex.exec(response.data)[1]
       return axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')
    })
    .then(function(response) {
        this.$emit('change', {
           lat : response.data.latitude,
           long : response.data.longitude
          })
        })
  }
}
</script>

And then how you receive and push it to your weather component:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ip @update="updateCoords"></ip>
    <weather :lat="lat" :long="long" />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'
import ip from './components/ip_resolve.vue'

export default {
  name: 'App',
  components: {
    Weather,
    ip
  },
  data : () => ({
    lat : null,
    long : null,
  }),
  methods : {
    updateCoords (coords) {
      this.lat = coords.lat
      this.long = coords.long
    }
}
}
</script>