Skip to content

Vue.js: Calling function on change

I’m building a component in Vue.js. I have an input on the page where the user can request a certain credit amount. Currently, I’m trying to make a function that will log the input amount to the console, as I type it in. (Eventually, I’m going to show/hide the requested documents based on the user input. I don’t want them to have to click a submit button.)

The code below logs it when I tab/click out of the input field. Here’s my component.vue:

    <div class="col s12 m4">
      <div class="card large">
        <div class="card-content">
          <span class="card-title">Credit Limit Request</span>
          <form action="">
            <div class="input-field">
              <input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text">
              <label for="credit-limit-input">Credit Limit Amount</label>
          <p>1. If requesting $50,000 or more, please attach Current Balance Sheet (less than 1 yr old).</p>
          <p>2. If requesting $250,000 or more, also attach Current Income Statement and Latest Income Tax Return.</p>

export default {
  name: 'licenserow',
  data: () => ({
    creditLimit: ""
  methods: {
    logCreditLimit: function (){

If I change methods to computed, it works – but I get an error saying Invalid handler for event: change every time it logs the value.



Use the input event.

<input v-model="creditLimit" v-on:input="logCreditLimit" id="credit-limit-input" type="text">

change only fires when the element loses focus for input elements. input fires each time the text changes.

2 People found this is helpful