鍍金池/ 問答/數(shù)據(jù)庫  HTML/ 為什么用nextTick還是無效？

為什么用nextTick還是無效？

遇到了一個用nextTick的問題。。。
里面的大概邏輯是init()方法是從后端拿數(shù)據(jù)然后存入this.addressList，這個數(shù)據(jù)改變會導致dom的改變，但是根據(jù)響應式原理，dom不會立即改變，是一個異步過程，于是我這里用nextTick方法等待dom改變之后再從中去取到某一項默認地址，可是這樣還是取不到，表現(xiàn)是selectedId還是空字符串？請問一下是我理解錯了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;
                    //         }
                    // })
                    }
                })
            },
回答
編輯回答
風清揚

不知這么寫能否讓你理解一下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() {
                     //在這里執(zhí)行的代碼表示從服務器返回的數(shù)據(jù)已經(jīng)賦值到data中，并且已經(jīng)更新了相應頁面中綁定的值，這時候就可以使用這個方法來執(zhí)行其它函數(shù)或者功能
                })
            }
        })
    }
2017年6月4日 21:24
編輯回答
情未了

代碼按照書寫順序運行，你直接寫到 init后面，直接就調(diào)用了啊，你的異步數(shù)據(jù)獲取請求還沒回來。

這dom生效意思是，你確定 更改了數(shù)據(jù)，在vue的聲明周期中，提供了nextTick方法供dom更改回調(diào)使用的。

2017年10月29日 06:50