When the data changes, the DOM view is not updated immediately. If we try to get a node or its value immediately after the change, the result is likely to be undefined. This is because Vue implements responsiveness not because the DOM changes immediately after the data changes, but because it updates the DOM according to a certain strategy. Let’s take a look at a small demo: App.vue <template> <div id="app"> <div ref="message">{{msg}}</div> <div v-if="msg1">{{msg1}}</div> <button @click="changeMsg">Change the Message</button> </div> </template> <script> export default { name: 'App', data(){ return { msg:"Hello Vue", msg1: '', } }, methods:{ changeMsg(){ this.msg = 'hello world'; this.msg1=this.$refs.message.innerHTML; console.log("Before updating DOM: "+this.msg1) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> By running the code, we can see that when we do not perform DOM operations in the this.$nextTick method, the value of this.$refs.message.innerHTML still stores the previous initial value; Modify the code: App.vue <template> <div id="app"> <div ref="message">{{msg}}</div> <div v-if="msg1">{{msg1}}</div> <button @click="changeMsg">Change the Message</button> </div> </template> <script> export default { name: 'App', data(){ return { msg:"Hello Vue", msg1: '', } }, methods:{ changeMsg(){ this.msg = 'hello world'; // this.msg1=this.$refs.message.innerHTML; // console.log("Before updating DOM: "+this.msg1) this.$nextTick(()=>{ this.msg1=this.$refs.message.innerHTML; console.log("After updating DOM: "+this.msg1) }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> After modifying the code, we can find that it is easy to receive the updated value using this.$nextTick, just as the official website explains: the delayed callback is executed after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM; Let's modify the code and compare it: App.vue <template> <div id="app"> <div ref="message">{{msg}}</div> <div v-if="msg1">{{msg1}}</div> <button @click="changeMsg">Change the Message</button> </div> </template> <script> export default { name: 'App', data(){ return { msg:"Hello Vue", msg1: '', } }, methods:{ changeMsg(){ this.msg = 'hello world'; this.msg1=this.$refs.message.innerHTML; console.log("Before updating DOM: "+this.msg1) this.$nextTick(()=>{ this.msg1=this.$refs.message.innerHTML; console.log("After updating DOM: "+this.msg1) }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> After modifying the code, we can now easily see the role of this.$nextTick(callback). callback is the callback function, which is what we want to do to operate the DOM; Application scenarios:
Because DOM updates are asynchronous, like the v-if directive determines the addition and deletion of DOM elements, when we assign values to variables in the method, if we do not use this.$nextTick(), we are likely to get the initial value. If we want to get the updated value, we need to use the this.$nextTick() method. The above is the detailed content of nextTick in Vue. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Analysis and solution of abnormal problem of loading jar in tomcat
>>: Install MySQL database 5.6 source code under Linux and change the login user password
CSS style specifications 1. Class Selector 2. Tag...
Preface Tomcat is an excellent Java container, bu...
The select element creates a single-select or mult...
This article records the detailed installation pr...
This article example shares the specific code of ...
This tutorial shares the specific code of MySQL5....
background If the catalina.out log file generated...
I was recently working on a comment feature that ...
I am currently learning about Redis and container...
This article mainly introduces 6 solutions to the...
1. Basic Specifications (1) InnoDB storage engine...
Table of contents Preface Style Function Descript...
In one sentence: Data hijacking (Object.definePro...
Absolute positioning method: (1) Set the parent e...
Written in front Nginx is not just a reverse prox...