Simple Input Binding using Vue
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="app">
<label class="badge badge-default">This is binded text -->{{text}}</label>
<br>
<input v-model="inputFieldValue" @input="onInput">
</div>
<br>
JavaScript
// Instantiating a new Vue instance
var app = new Vue({
el: '#app',
data: {
inputFieldValue: '',
},
computed: {
text() {
console.log('computed');
console.log(new Date());
return this.inputFieldValue + '_';
}
},
methods: {
onInput(event) {
console.log('input');
console.log(new Date());
let computed = this.text;
console.log('computed from input ' + computed);
}
}
});