Is this a correct usage of v-on:change?

Question

I have a text input that has a v-model and a v-on:change attached to it. As the user types I update an array in data and the UI is bound to that array. I also want to call a method to send the user input via AJAX. The data sent to the server is the result of a computed property.

<div id="app">
  <input
      id="user-input"
      type="text"
      v-model="userInput"
      v-on:change="process()">

   <ul id="parsed-list">
      <li v-for="item in parsedInput">
          {{ item }}
      </li>
    </ul>
</div>

let parse = input => {
    return input.split(',')
}

let serverProcess = values => {
    // Send array to server
}

new Vue({
  el: '#app',
  data: {
    userInput: ''
  },
  computed: {
    parsedInput () {
        return parse(this.userInput)
    }
  },
  methods: {
    process () {
        serverProcess(this.parsedInput);
    }
  }
});

Is this usage of both a v-model and v-on:change together best practice Vue?

Answer 1

thumbs up @kmc0590000. In addition, with watch you can also see the previous state and current. They are passed as parameters.

v-model is just syntactic sugar and does the following:

<input :value="userInput" @input="change">

You can also write @change instead of v-on: and :value instead of v-bind:value.

In Line 6 (v-on:change="process()") you can remove the parentheses. The input event is given to your method as parameter and you can access the attributes directly. (https://vuejs.org/v2/guide/events.html#Method-Event-Handlers)