fire parent method on child component value change vuejs

Question

i want to fire a parent method on child component value change...

i pasted code below

first section is parent component and second is child component.... when i change value of ifsc field i want to fire getIfscCode() method.

Problem: when event happen getIfscCode() method not fire may be cause of i not passed any props to the child element but you can suggest me that how to do it.

parent component

<template>
  <div class="bg-gray-200 h-full">
    <header-view></header-view>
    <div class="px-32 py-6">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nemo quam voluptates tenetur atque, similique odio quasi assumenda, quo porro deleniti eos nobis officia tempore, at harum odit. Illo, doloribus.</p>
    </div>
    <h2 class="text-2xl text-center about">Apply for Subsidy</h2>
    <div class="w-full h-full flex justify-center mt-16">
      <form class="w-full max-w-lg">
        <text-input id="name" placeholder="Enter Name" title="Name"></text-input>
        <text-input id="fathername" placeholder="Enter Father Name" title="Father Name"></text-input>
        <text-input id="phone" placeholder="Enter Active Mobile No" title="Mobile No"></text-input>
        <text-input id="aadhar" placeholder="Enter Aadhar No" title="Aadhar No"></text-input>
        <text-input id="accountno" placeholder="Enter Account No" title="Bank Account No"></text-input>
        <text-input
          id="ifsc"
          placeholder="Enter IFSC Code"
          title="Bank Branch IFSC Code"
          v-model="data.ifsc"
          @change="getIfscCode(data.ifsc)"
        ></text-input>
        <text-input id="accountname" placeholder="Enter Account Name" title="Bank Account Name"></text-input>
      </form>
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script>
import HeaderView from "./header/Header";
import FooterView from "./footer/Footer";
import TextInput from "./form/TextInput";
export default {
  components: {
    HeaderView,
    FooterView,
    TextInput
  },
  data() {
    return {
      data: {
        name: "",
        ifsc: ""
      }
    };
  },
  created() {},
  methods: {
    getIfscCode(code) {
      axios
        .get(
          "https://mfapps.indiatimes.com/ET_Calculators/getBankDetailsByIfsc.htm?ifsccode=" +
            code +
            "&callback=objIFSC.getIfscData"
        )
        .then(res => {
          console.log(res.data);
        });
    }
  }
};
</script>

child component

<template>
  <div class="flex flex-wrap mb-6">
    <div class="w-full px-3">
      <label
        class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
        :for="id"
      >{{title}}</label>
      <input
        class="appearance-none block w-full bg-gray-900 p-text-color border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 placeholder-blue-300"
        :id="id"
        type="text"
        :placeholder="placeholder"
        :value="inputvalue"
        @input="$emit('update', $event.target.value)"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    id: {
      type: String
    },
    placeholder: {
      type: String
    },
    inputvalue: undefined
  },
  model: {
    prop: "inputvalue",
    event: "update"
  }
};
</script>

Answer 1

You emit update event but you catch change event. Also because you don't emit input event then v-model in a parent component will not work. Try to correct like this:

child component

"$emit('input', $event.target.value)"

parent component

@input="getIfscCode($event)"