Vue JS : How to make Axios ApI call from Child component using Value Chosen from Parent Vue Dropdown

Anand Natarajan' 0
Viewed 34

I have Parent Component which will have currency values as Drop down component, and have child component which should make an AXIOS API call dynamically based upon value chosen from Parent Currency Dropdown. Dropdown values will be changed dynamically from Parent Component. But axios API Call will be done from child only. I have used below approach using $emit. But nothing seems to be working. Also at child Component parent dropdown is appearing again(duplicate). Want to prevent that. So I need below 2 things

  1. Preventing dropdown appearing at Child as result of import of parent component
  2. How to fetch value at Child for changed value at parent

ParentComponent.vue

<select  @change="sendChange" class="form-select">
    <option value="">Select a Currency</option>
    <option v-for="(currency, index) in currencyList" :value="currency.code" :key="index">
      {{ currency.currencyCode}}
    </option>
  </select>

  <script>
    export default {
    data() {
        return {
           currencyList :[],
            currentcyChosen: ' ',
        };
    },
   sendChange(event) {
            this.currentcyChosen = event.target.value;
            //this should be used at parent
            this.$emit("currencyChange", this.currentcyChosen);
            alert("capturing emit");
            alert(this.currentcyChosen);
        }
 </script>

ChildComponent.vue

   <template>
    <ParentComponent v-on:currencyChange ="getCurrencyChosenFromParent" />
   </template>

  <script>
    import axios from 'axios';
    import ParentComponent  from './ParentComponent.vue';
    data() {
        return {
            localCurrency: ' ',
        };
    },
    getCurrencyChosenFromParent(){
      alert("got currency from Parent);
      //this should be fetched from Parent
      alert(this.localCurrency);
      //Make Axios call from child based upon currencyChange
    }
    </script>'''
drop-down-menu vuejs3 vue.js javascript
1 Answers

I hope the following code will help you.

ParentComponent.vue :

  <select
    @change="sendChange"
    class="form-select"
  >
    <option value="">Select a Currency</option>
    <option
      v-for="(currency, index) in currencyList"
      :value="currency.code"
      :key="index"
    >
      {{ currency.currencyCode}}
    </option>
  </select>
</template>

<script>
export default {
  data () {
    return {
      currencyList: [
        {
          'code': 1,
          'currencyCode': 'one'
        },
        {
          'code': 2,
          'currencyCode': 'two'
        },
        {
          'code': 3,
          'currencyCode': 'three'
        },
      ],
      currentcyChosen: ' ',
    };
  },
  methods: {
    sendChange (event) {
      this.currentcyChosen = event.target.value;
      this.$emit("currencyChange", this.currentcyChosen);

    }
  }
}
</script>

ChildComponent.vue :

<template>
  <parent-components @currencyChange="(n) => localCurrency = n" />
  <p>{{localCurrency}}</p>
</template>

<script>
import parentComponents from './parentComponents.vue';
export default {
  components: { parentComponents },
  data () {
    return {
      localCurrency: '',
    };
  },
}
</script>
Hamid Naseri0
Related