Использовать данные из топора ios, чтобы получить другой файл Vue - PullRequest
Новая
       4

Использовать данные из топора ios, чтобы получить другой файл Vue

1 голос
/ 22 марта 2020

У меня есть некоторый код, который разрешает IP-адрес компьютера в широту / длину, например,

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>

Я хочу «вернуть» широта / долгота для приложения. Vue, где он будет проходить широта / долгота в качестве реквизита для «Погода. js»

приложение. 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>

У меня есть прочитайте немного о $ emit, но я не знаком с парадигмой дизайна и не знаю, как ее реализовать. Может кто-нибудь предложить мне несколько лучших практик здесь?

Спасибо,

Ответы [ 2 ]

1 голос
/ 22 марта 2020

Вы почти у цели.

Вот как вы можете отправлять данные на ваш ip-компонент: 

<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>

А затем, как вы получаете и отправляете sh это на ваш Погодная составляющая:

image
1 голос
/ 22 марта 2020

В вашем ip_resolve.vue используйте это для отправки события после получения данных от топора ios: 

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

А затем в вашем App.vue: 

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

и внутри <script> в 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
    }
  }
}
...