Passing event methods in Vue

Question

I'm trying to determine how to pass an event down with a bound change listener to a child input component. I'm using wrapped input components, but want to be able to define methods in 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);
}

This fires on the 'input', but not on the 'currency-input'. If I add @input prop to the currency-input and bind it to the masked-input's @input, then the function runs but the value of 'e' is just the input value, not the event.

Why is this happening and how can I pass the function so that the parameter ends up being the event itself?

Did you try using .native modifier on the event? Something like @change.native="changeInput" — Ikbel

Roy J Roy J · Accepted Answer · 2017-08-17T21:03:25

Is this the sort of thing you want? Inside the currency-input, the <input> element uses the passed-in input prop as its input event handler.

new Vue({
  el: '#app',
  data: {
    inputs: {
      name: 'iName',
      address: 'iAddress'
    }
  },
  methods: {
    changeInput(e) {
      console.log('Change', e.target.tagName, e.target.value);
    }
  },
  components: {
    currencyInput: {
      props: ['input', 'value']
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <currency-input :input="changeInput" :value="inputs.name" inline-template>
    <div>
      <input @input="input" :value="value">
    </div>
  </currency-input>
  <input @input="changeInput" :value="inputs.address">
</div>

Passing event methods in Vue

1 Answers