Currently, I have set up a text input field with both a v-model and a v-on:change event attached to it. Whenever the user types something in the input field, an array in the data section gets updated and the UI is bound to that array. Additionally, I also want to trigger a method to send this user input data via AJAX. The data sent to the server is generated from 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);
}
}
});
I'm curious if it's considered best practice in Vue to use both v-model and v-on:change together in such scenarios?