解決<el-checkbox-group> 數據與UI更新不同步的坑

Nino 發布于2019-08-23 16:09 / 3534人閱讀

摘要：情景再現上午下午晚上周一周二周三周四周五周六周日周一的選擇情況周二的選擇情況周三的選擇情況周四的選擇情況為賦值得到這樣的結果但是當我們點擊其它選擇框的時候，沒有反應。個人認為與的數據同步有些問題。

Bug情景再現

得到這樣的結果：

但是當我們點擊其它選擇框的時候，沒有反應。

嘗試解決

最先想到的原因應該是vue沒有對arrange的改變監控到，于是解決辦法是使用 vue. set

this.$set(this.storeItem,   "arrange",  week)

這樣修改后確實也起作用了。
? 注意：這里使用 vue.set 起作用根本是，瞎貓碰上死耗子，不能相響應的原因根本不是這個
而且我們仔細讀 Vue 的官方文檔
Vue.set( target, key, value )
作用是向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = "hi")

這里我們根本沒有添加 arrange屬性，而只是去改變了arrange 屬性的值，vue按理說應該是能夠檢測到的。后面的實驗也認證了我的觀點。

實驗：讓我們再把表單復雜一些。
注：部分代碼已經省略

這樣寫了之后， checkBox 還是：能夠展示勾選，但是點擊其它選擇框沒有任何反應。

于是我們將 mounted 里面的代碼改成

const week = [
            [1,2],        //周一的選擇情況
            [1],          //周二的選擇情況  
            [],           //周三的選擇情況
            [2,3],         //周四的選擇情況
            [2,1],
            [1,2,3],
            [3]
        ]
        //為checkbox-group 賦值

        const  _obj = {};
        const  self  =  this;
        
        for (let i=0; i<3; i++){
               _obj = {}; 
               _obj.name = `這是  ${i} 號`;
               _obj.arrange = week;
               self.$set(self.serviceStoreList,   i,    _obj)
               // 或
               self.serviceStoreList.splice(i,  1,  _obj)
        }

還是不會起任何作用，點擊其它選擇框依然是點不動，不能進行交互。

這里我反復實驗了幾次，發現了一個特殊的現象。就是當你去點擊其它選擇框的時候， vue-devtool 里面顯示的數據其實是已經改變了的。
而且，當你點擊了一個checkBox，然后去填寫另外的一個表單項，比如去選擇下拉，或者填寫其它的時候，
checkBox 立刻就改變了。相當于它之前的v-model 的數據其實是正常的，只是視圖卡住了。

最后的解決辦法

vue 的數據沒有問題，那么肯定是 element 埋下的坑。
個人認為與的數據同步有些問題。
這樣寫就好了


         上午
         下午
         晚上


//data 里面增加一個字段
data (){
    checked：false ,           //這個 checked沒有任何作用，只是為了繞開elment 的這個坑
}

這樣我們不用設置 vue.set（因為vue 其實重頭到尾都能夠監視到數據的改變）

const week = [
        [1,2],        //周一的選擇情況
        [1],          //周二的選擇情況
        [],           //周三的選擇情況
        [2,3],        //周四的選擇情況
        [2,1],
        [1,2,3],
        [3]
    ]
//為checkbox-group 賦值
const  _obj = {};
const  _store = [];
for (let i=0; i<3; i++){
    _obj = {};
    _obj.name = `這是  ${i} 號`;
    _obj.arrange = week;
    _store.push(_obj);
}
this.checked = false;            //需將checked 設置為false，不然選擇框可能會出現全部選中的情況
this.serviceStoreList = _store;  //直接設置，checkbox也能正常交互

心得

vue 只是無法探測普通的新增屬性，但是 Vue 能夠探測到data 里面已經注冊過的對象的改變，比如重新給這個對象賦值，或改變它已經注冊過的屬性的值（非給它新增其它屬性）。無論這個對象的數據結構有多么的復雜。

少用 vue.set, 多在上面顯示指明 @change，讓它狀態改變。

再每次修改的 v-model 的值的時候，先將 checked 設置為 false

1. this.checked = false
2. this.serviceStoreList =  _store

GPU云服務器云服務器音視頻不同步怎么解決 python &lt&gt java &lt=&gt java&lt &gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102732.html

解析vue表單驗證rules及validator驗證器的使用方法

　　很多知識都是需要提早知道，才可以規避很多錯誤。　　Element中Form （表單）組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，并將 Form-Item 的 prop 屬性設置為需校驗的字段名即可?！　∽⒁猓簆rop對應表單域 model 字段，使用 validate方法時，該屬性是必填的?！　”韱悟炞Crules　　以官網給出的例子分析來看　　將prop屬性設置為...

3403771864 2022-11-23 21:44 評論0 收藏0
Spring事務&分布式事務&單服務處理多數據源事務

本文以一個實際業務問題來談談事務該如何處理。對接外部系統是是不可避免的，從廣泛意義上來說，外部系統范圍很大，中間件（數據庫）也屬于外部系統。當我們討論事務時，通常我們將那些沒有支持事務的系統稱為外部系統，業務系統基本上都是外部系統。問題有這樣一套系統，以gitlab為底層系統，在gitlab project的基礎上封裝了代碼倉，系統對其中一些與gitlab關聯的數據進行了落表。創建代碼倉的邏輯過...

社區管理員 2022-10-08 13:56 評論0 收藏0
UCloud私有云雙活數據中心解決方案，強效保障業務可靠性和連續性

引言據信通院《2022云計算白皮書》報告，國內云計算市場達3000億規模，云計算成為企業數字化轉型的基礎設施已是大勢所趨。隨著企業數字化轉型的逐步深入，業務發展與IT基礎架構演進密不可分，如何保障數據隱私安全和業務連續性，是 IT 建設中必須關注的問題。出于數據隱私和安全性考量，私有云解決方案成為構建數字化轉型的基礎底座，通過同城雙活及兩地三中心的高可用架構保障生產環境穩定性和業務過程連續性；同時...

社區管理員 2023-02-24 11:19 評論0 收藏0
MySQL日志-binlog/redo log/undo log什么區別

一、前言MySQL 整體來看，其實就有兩塊：一塊是Server層，它主要做的是MySQL功能層面的事情；還有一塊是引擎層，負責存儲相關的具體事宜。redo log 是 InnoDB 引擎特有的日志，而 Server 層也有自己的日志，稱為 binlog（歸檔日志）。二、Redo logWAL技術的全稱是 Write-Ahead Logging，它的關鍵點就是先寫日志，再寫磁盤。當有一條記錄需要更新...

社區管理員 2022-10-18 10:52 評論0 收藏0