I'm trying to update the display using Vue's monitoring properties, but when I change the text in input, the {{newMessage}} and {{oldMessage}} parts below are not updated. ({{message}} parts are updated.)
I'm sorry to ask you a rudimentary question, but please let me know when you know how it works.
HTML
<p>
{{ message}}}/updated with input value
{{ newMessage}}/null Remain Unupdated
{{ oldMessage}}//null does not update
</p>
<input type="text" v-model="message"/>
<pre>
{{ $data}} // newMessage, oldMessage value not updated
</pre>
JavaScript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
newMessage:',
oldMessage: ''
},
watch: {
message:(newValue, oldValue) = > {
This.newMessage=newValue
This.oldMessage=oldValue
console.log(this.newMessage, newValue) // Both new values are displayed on the console
}
}
})
Inside the watch
message:function(newValue, oldValue){
...
}
as
Unlike functions by function, the Arrow function this is determined at generation.Therefore, this is not the Vue instance you expect
© 2024 OneMinuteCode. All rights reserved.