fire parent method on child component value change vuejs - vue.js

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