成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決<el-checkbox-group> 數(shù)據(jù)與UI更新不同步的坑

Nino / 3562人閱讀

摘要：情景再現(xiàn)上午下午晚上周一周二周三周四周五周六周日周一的選擇情況周二的選擇情況周三的選擇情況周四的選擇情況為賦值得到這樣的結(jié)果但是當(dāng)我們點(diǎn)擊其它選擇框的時(shí)候，沒有反應(yīng)。個(gè)人認(rèn)為與的數(shù)據(jù)同步有些問題。

Bug情景再現(xiàn)

得到這樣的結(jié)果：


但是當(dāng)我們點(diǎn)擊其它選擇框的時(shí)候，沒有反應(yīng)。

嘗試解決

最先想到的原因應(yīng)該是vue沒有對arrange的改變監(jiān)控到， 于是解決辦法是使用 vue. set

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

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

這里我們根本沒有添加 arrange屬性，而只是去改變了arrange 屬性的值，vue按理說應(yīng)該是能夠檢測到的。后面的實(shí)驗(yàn)也認(rèn)證了我的觀點(diǎn)。

實(shí)驗(yàn)：讓我們再把表單復(fù)雜一些。
注：部分代碼已經(jīng)省略

這樣寫了之后， checkBox 還是： 能夠展示勾選，但是點(diǎn)擊其它選擇框沒有任何反應(yīng)。

于是我們將 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)
        }

還是不會起任何作用，點(diǎn)擊其它選擇框依然是點(diǎn)不動，不能進(jìn)行交互。

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

最后的解決辦法

vue 的數(shù)據(jù)沒有問題，那么肯定是 element 埋下的坑。
個(gè)人認(rèn)為 與 的數(shù)據(jù)同步有些問題。
這樣寫就好了


         上午
         下午
         晚上


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

這樣我們不用設(shè)置 vue.set（因?yàn)関ue 其實(shí)重頭到尾都能夠監(jiān)視到數(shù)據(jù)的改變）

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 設(shè)置為false，不然選擇框可能會出現(xiàn)全部選中的情況
this.serviceStoreList = _store;  //直接設(shè)置，checkbox也能正常交互
心得

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102732.html

相關(guān)文章

  • 解析vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法

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

    3403771864 評論0 收藏0

  • Spring事務(wù)&分布式事務(wù)&單服務(wù)處理多數(shù)據(jù)源事務(wù)

    本文以一個(gè)實(shí)際業(yè)務(wù)問題來談?wù)勈聞?wù)該如何處理。對接外部系統(tǒng)是是不可避免的，從廣泛意義上來說，外部系統(tǒng)范圍很大，中間件（數(shù)據(jù)庫）也屬于外部系統(tǒng)。當(dāng)我們討論事務(wù)時(shí)，通常我們將那些沒有支持事務(wù)的系統(tǒng)稱為外部系統(tǒng)，業(yè)務(wù)系統(tǒng)基本上都是外部系統(tǒng)。問題有這樣一套系統(tǒng)，以gitlab為底層系統(tǒng)， 在gitlab project的基礎(chǔ)上封裝了代碼倉，系統(tǒng)對其中一些與gitlab關(guān)聯(lián)的數(shù)據(jù)進(jìn)行了落表。創(chuàng)建代碼倉的邏輯過...

    社區(qū)管理員 評論0 收藏0

  • UCloud私有云雙活數(shù)據(jù)中心解決方案，強(qiáng)效保障業(yè)務(wù)可靠性和連續(xù)性

    引言據(jù)信通院《2022云計(jì)算白皮書》報(bào)告，國內(nèi)云計(jì)算市場達(dá)3000億規(guī)模，云計(jì)算成為企業(yè)數(shù)字化轉(zhuǎn)型的基礎(chǔ)設(shè)施已是大勢所趨。隨著企業(yè)數(shù)字化轉(zhuǎn)型的逐步深入，業(yè)務(wù)發(fā)展與IT基礎(chǔ)架構(gòu)演進(jìn)密不可分，如何保障數(shù)據(jù)隱私安全和業(yè)務(wù)連續(xù)性，是 IT 建設(shè)中必須關(guān)注的問題。出于數(shù)據(jù)隱私和安全性考量，私有云解決方案成為構(gòu)建數(shù)字化轉(zhuǎn)型的基礎(chǔ)底座，通過同城雙活及兩地三中心的高可用架構(gòu)保障生產(chǎn)環(huán)境穩(wěn)定性和業(yè)務(wù)過程連續(xù)性；同時(shí)...

    社區(qū)管理員 評論0 收藏0

  • MySQL日志-binlog/redo log/undo log什么區(qū)別

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

    社區(qū)管理員 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<