前言

??就今天，這個(gè)問題必須解決。這個(gè)問題必須記錄。關(guān)于vue使用element-ui的el-checkbox-group問題。這個(gè)問題是導(dǎo)致整個(gè)項(xiàng)目復(fù)雜度變高的主要原因！

??今天在搞一個(gè)比較久的項(xiàng)目，多久呢？年前的，幾個(gè)哥們一塊寫的，到現(xiàn)在才差不多搞定！我搞那個(gè)pc考試端的東西，但是一個(gè)多選題給我難住了。

開搞

1.第一版的時(shí)候用了el-checkbox。當(dāng)時(shí)前后端都商議好了要讓前端傳一個(gè)大的對象。這個(gè)對象里面有單選，多選，判斷，填空和簡答五種題型的各個(gè)題的答案。每個(gè)題答案都是以題的編號為鍵，把值寫進(jìn)數(shù)組里充當(dāng)值。（這里我聲明，要讓后端解析json，那還是把后端殺了吧！后端解析一個(gè)大大的json就相當(dāng)于是在解析字符串，即使用json工具也要解析好長時(shí)間，并且寫一大堆看似很厲害，但是都是無用功的代碼。由于傳的字符串的格式千奇百怪，寫的代碼肯定很多就是那種不能復(fù)用的那種，這嚴(yán)重違反了java的封裝特性。以后誰要你在后端用java解析json，你還是和他干一架吧。讓他知道你的決心。）

2.起初，我以為要讓后端接一個(gè)大對象，我就直接封裝一個(gè)就行了。誰知道要的格式這么怪

以圖為鑒

3.關(guān)鍵是多選題這東西，選項(xiàng)不好整，我得創(chuàng)建一個(gè)二維數(shù)組來接它。js里面還沒有二維數(shù)組，我只能強(qiáng)行創(chuàng)建了。

4.搞了這個(gè)玩意之后，我的思路仿佛開闊了。我把所有的題和答案都放進(jìn)了數(shù)組。剛開始還在感嘆，數(shù)組真香。之后，我這個(gè)封裝大對象的方法不會(huì)寫，就讓大哥寫了。（封裝大對象這個(gè)思路不是我的，我只能讓他寫?。┲缶统鰡栴}了！先是答題卡由于題目的編號不對，在初始化的時(shí)候答題卡根本不出來！之后就是，答題卡根本不按選擇的選項(xiàng)來改變顏色！

5.今天，終于完美的解決了這些問題。我們用了el-checkbox-group，但是這個(gè)東西又引入了一個(gè)新的問題Cannot read property ‘length’ of undefined。今天，帶哥在官網(wǎng)上看了好長時(shí)間的樣例，才明白，它這個(gè)東西要綁定一個(gè)已經(jīng)存在了的一維數(shù)組。注意：是已經(jīng)存在了的，一維數(shù)組。但是在后端返回的數(shù)據(jù)中沒有空的一維數(shù)組。這可怎么辦？這時(shí)候就要給一個(gè)對象強(qiáng)行搞一個(gè)屬性了。（由于js語言是弱類型的，需要給一個(gè)對象添加新的屬性，就直接 賦值就完了）

就像這種

5.在使用答題卡的時(shí)候，直接把遍歷這個(gè)對象里的數(shù)組，看看它是否選了答案，如果選了，那就把對應(yīng)下標(biāo)的按鈕修改顏色就行！

就是這種

謹(jǐn)記：盡量讓前端處理json?。。。。。。。?！