vue 中數據沒有同步渲染的解決方法

今天在做一個頁面，遇到一個數據渲染不同步的問題，如下：

代碼如下：原理：點擊時，對應的banklist 的選項選項變為 true 選中狀態 

html:

<div class="PayOrder">
        <div class="header">
            <span class="iconfont">&#xe606;</span>
            支付首頁
        </div>
        
        <div class="title">
            <h3>￥<span>{{odata.order_amount}}</span></h3>
            <p>{{oname}}</p>
        </div>
        
        <div class="bankpay" @click="paybankshow">
            <div>
                <span class="iconfont">&#xe612;</span>
                快捷支付
            </div>
            <span v-show="!paybank" class="iconfont">&#xe65f;</span>
            <span v-show="paybank" class="iconfont active">&#xe65e;</span>
        </div>
        
        <ul class="bank" v-show="paybank">
            <li @click="checkedcurbank(item.bankname)" v-for="item in banklist" v-if="banklist.length>0">
                
               <div class="bankli" :style="{backgroundImage:'url(' + item.logoimgurl + ')'}"></div>
               {{item.ischecked}}
              <span v-show="item.ischecked" class="iconfont active">&#xe626;</span>
            </li>
            <li @click="toPayObligate">
                <div>
                    <span class="iconfont">&#xe7fc;</span>
                    添加銀行卡
                </div>
            </li>
        </ul>
        
        <ul class="pay">
            <li @click="weixinactive">
                <div>
                    <span class="iconfont" style="color: #22b190;">&#xe65a;</span>
                    微信支付
                </div>
                <span v-show="!weixin" class="iconfont">&#xe692;</span>
                <span v-show="weixin" class="iconfont active">&#xe626;</span>
                
             
            </li>
            <li @click="zhifubactive">
                <div>
                    <span class="iconfont" style="color: #4d90dd;">&#xe64c;</span>
                    支付寶支付
                </div>
                <span v-show="!zhifub" class="iconfont">&#xe692;</span>
                <span v-show="zhifub" class="iconfont active">&#xe626;</span>
              
            </li>
        </ul>
        
        <p class="msg">請您在提交訂單后30分鍾內完成支付，逾期訂單會自動取消</p>
        <div v-if="isqueren" class="butt" @click="pay">確定支付</div>
    </div>

 

js：

 checkedcurbank(str){
              
                this.banklist.forEach(function(item){
                   if(item.bankname==str){
                       item.ischecked=true;
                   }else{
                       item.ischecked=false;
                   }
                });
                
                this.weixin=false;
                this.zhifub=false;
                              
                
                 this.banklist.forEach(function(item){
                     console.log(item.bankname+"----------"+item.ischecked);
                 });
                 console.log("weixin :"  + this.weixin);
                 console.log("zhifubao :" + this.zhifub);
                 console.log(this.banklist);
            },

運行結果：點擊兩次，第一次點擊招商銀行，第二次點擊建設銀行

 

說明如下：第二次點擊無法選中建設銀行，從右邊的控制台可以看出，實際上第二次點擊時，建設隱行對應的選中狀態已經變成了true，但是頁面並沒有同步出現選中按鈕，這就是vue 中數據沒有及時更新到頁面上

 

下午百度了很多，但是沒有找到原因，6點多的時候，在想，數據之所以沒有更新到到頁面上，是因為 vue 沒有檢測到數據變化，那么，我就給他來一點數據變化，把  banklist 中的數據取出來一條，然后再把這條取出的數據放進去，這樣就有明顯的數據變化了，變更后如下：以下代碼中，增加了 16 / 17 行

 checkedcurbank(str){
              
                this.banklist.forEach(function(item){
                   if(item.bankname==str){
                       item.ischecked=true;
                   }else{
                       item.ischecked=false;
                   }
                });
                
                
                this.weixin=false;
                this.zhifub=false;
                this.isqueren = false;
                
                var ocuritem = this.banklist.pop();
                this.banklist.push(ocuritem);
                
                 this.banklist.forEach(function(item){
                     console.log(item.bankname+"----------"+item.ischecked);
                 });
                 console.log("weixin :"  + this.weixin);
                 console.log("zhifubao :" + this.zhifub);
                 console.log(this.banklist);
            },

運行結果：

 

可以看出，已經可以同步更新到頁面了~~，以后，當數據不能同步更新時，我們可以對數據做以下類似的處理，先取出來一部分，再把這部分放回去，讓 vue 明顯的檢測到數據的變化，這樣就可以同步更新數據了