国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Nino / 3515人閱讀

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

Bug情景再現(xiàn)

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


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

嘗試解決

最先想到的原因應(yīng)該是vue沒(méi)有對(duì)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)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無(wú)法探測(cè)普通的新增屬性 (比如 this.myObject.newProperty = "hi")

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

實(shí)驗(yàn)：讓我們?cè)侔驯韱螐?fù)雜一些。
注：部分代碼已經(jīng)省略

這樣寫(xiě)了之后， checkBox 還是： 能夠展示勾選，但是點(diǎn)擊其它選擇框沒(méi)有任何反應(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} 號(hào)`;
               _obj.arrange = week;
               self.$set(self.serviceStoreList,   i,    _obj)
               // 或
               self.serviceStoreList.splice(i,  1,  _obj)
        }

還是不會(huì)起任何作用，點(diǎn)擊其它選擇框依然是點(diǎn)不動(dòng)，不能進(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， 然后去填寫(xiě)另外的一個(gè)表單項(xiàng)，比如去選擇下拉，或者填寫(xiě)其它 的時(shí)候，
checkBox 立刻就改變了。相當(dāng)于它之前的v-model 的數(shù)據(jù)其實(shí)是正常的，只是視圖卡住了。

最后的解決辦法

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


         上午
         下午
         晚上


//data 里面增加一個(gè)字段
data (){
    checked：false ,           //這個(gè) checked沒(méi)有任何作用，只是為了繞開(kāi)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} 號(hào)`;
    _obj.arrange = week;
    _store.push(_obj);
}
this.checked = false;            //需將checked 設(shè)置為false，不然選擇框可能會(huì)出現(xiàn)全部選中的情況
this.serviceStoreList = _store;  //直接設(shè)置，checkbox也能正常交互
心得

vue 只是 無(wú)法探測(cè)普通的新增屬性 ，但是 Vue 能夠探測(cè)到data 里面已經(jīng)注冊(cè)過(guò)的對(duì)象的改變，比如重新給這個(gè)對(duì)象賦值，或改變它已經(jīng)注冊(cè)過(guò)的屬性的值（非給它新增其它屬性）。無(wú)論這個(gè)對(duì)象的數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102732.html

相關(guān)文章

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

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

    3403771864 評(píng)論0 收藏0

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

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

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

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

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<