Vue.js, как запустить axios.get в компоненте после нажатия на родительскую выпадающую кнопку?

Question

Я выбираю валюту в родительском компоненте Vue, используя bootstrap select:

<template>
...
<div class = "dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button"> {{currency}} </ button>
    <div class = "dropdown-menu">
        <button class = "dropdown-item" @ click = "currencyChange ('USD')"> USD </ button>
        <button class = "dropdown-item" @ click = "currencyChange ('EUR')"> EUR </ button>
    </div>
</div>
...
<div class = "box">
    <box v-bind: currency-name = 'currency' />
</div>
<template>

<script>
...
data () {
    return {
        currency: 'USD'
    }
},
components: {
    box: component
},
methods: {
    currencyChange (currency) {
        this.currency = currency;
    }
}
...
</script>

В «окне» дочернего компонента я получаю данные с сервера через вызов axios.get и отображаю их:

<script>
...
props: ['currencyName'],
data () {
  return {
    boxData: {},
  }
},
created () {
  axios.get (URL + this.currencyName)
    .then (response => {
      this.Data = response.data;
    })
    .catch (e => {
      this.errors.push (e)
    })
},
...
</script>

Проблема в том, что если выбрана валюта EUR, я никогда не отправляю новый запрос на сервер, и данные в компоненте box остаются неизменными для валюты 'USD', за исключением переменной currencyChange.Если переименовать «созданный» хук в «обновленный» в компоненте, все начинает работать должным образом, с одним исключением - постоянные вызовы на сервер.

Как я могу исправить это неправильное поведение в одном вызовена сервер только после выпадающего клика?

Answer 1

Для этого можно использовать свойство watch.

<script>
  ...
  props: ['currencyName'],
  data () {
    return {
      currentCurrency: this.currencyName,
      boxData: {},
    }
  },
  watch: {
    currentCurrency() {
      this.getData();
    }
  },
  methods: {
    getData() {
      axios.get (URL + this.currentCurrency)
      .then (response => {
        this.Data = response.data;
      })
      .catch (e => {
        this.errors.push (e)
      })
    },
  }
  ...
</script>

Взгляните на https://vuejs.org/v2/guide/computed.html#Watchers

РЕДАКТИРОВАТЬ

Как подсказывает DF , вы можете добавить immediate: true, к вашему наблюдателю, чтобы вызвать его при инициализации компонента