Currently, I am facing a challenge in passing an event downward with a bound change listener to a child input component. Although I am utilizing wrapped input components, my goal is to define methods within the parent component.
//App.js:
<currency-input :input="changeInput" :value="inputs.name"></currency-input>
<input :input="changeInput" :value="inputs.address"></input>
<script>
export default: {
changeInput(e) {
this.$store.dispatch('changeInput', e);
}
}
<script>
//currency-input
<masked-input type="currency" class="currency-input" :mask="currencyMask">
</masked-input>
//store.js vuex action
changeProp: function( state, e ){
state.dispatch('change_prop', e.target.name, e.target.value);
}
The issue arises where the 'input' triggers the function but not the 'currency-input'. By adding @input prop to the currency-input and binding it to the masked-input's @input, the function executes but the value of 'e' only contains the input value, not the event itself.
I am puzzled by this behavior. How can I successfully pass the function so that the parameter passed represents the event?