Why is nextTick still ineffective?

encountered a problem with using nextTick. The general logic in
is that the init () method takes data from the backend and stores it in this.addressList,. This data change will lead to the change of dom, but according to the principle of response, dom will not change immediately, it is an asynchronous process, so I use the nextTick method to wait for dom to change before getting a default address from it, but this still cannot be obtained. Is it selectedId or an empty string? Excuse me, do I misunderstand the use of nextTick? 

mounted(){
            this.init();
            //??
             this.$nextTick(function () {
                 this.addressList.forEach((item)=>{
                            if(item.isDefault){
                                this.selectedId=item.addressId;
                            }
                    })
            })
        },
        methods:{
            init(){
                axios.get("/users/addressList").then((response)=>{
                    var res=response.data;
                    if(res.status==="0"){
                        this.addressList=res.result;
                        //
                        //     this.addressList.forEach((item)=>{
                    //         if(item.isDefault){
                    //             this.selectedId=item.addressId;
                    //         }
                    // })
                    }
                })
            },
Vue.js
Apr.24,2021

I wonder if this can help you understand the purpose of nextTick : 

mounted(){
    this.init();
},
methods:{
    init(){
        axios.get('/users/addressList').then((response)=>{
            var res=response.data;
            if(res.status==='0'){
                this.addressList=res.result;
                this.addressList.forEach((item)=>{
                  if(item.isDefault){
                      this.selectedId=item.addressId;
                   }
                });
                this.$nextTick(function() {
                     //data
                })
            }
        })
    }
The

code runs in writing order. You write directly after init and call it directly. Your asynchronous data acquisition request hasn't come back yet.

this dom takes effect means that you are sure that the data has been changed, and during the vue declaration cycle, the nextTick method is provided for the dom change callback.

Previous: How to use markdown syntax to add local pictures in a question?

Next: Are all the prototypes of ordinary objects in node empty?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu