vue經過v-model對checkbox的數據渲染與獲取

——vue對v-model和checked屬性的解析

---

前：

• 不知道副標題這樣寫，尤大會不會想直接拍死我，哈哈哈，但我仍是感謝你。此處副標題有點誇大其詞，真正的文章並無涵蓋那麼廣且深，只是我被坑的太心塞。

• Stack Overflow是個好地方，沒事記得多逛逛，即便英語很爛，也不會耽誤你看JavaScript語言，是的，JavaScript是個人真愛。

開發需求：

• 此處爲目的清晰，需求被我縮小至checkbox，由於我只是栽在checkbox上面。

• 多選操做，且全部選項是數據庫獲取，同時默認選中的選項也是數據庫獲取，以後按照用戶需求選取再提交。

• 

開發問題：

• 我當時在渲染已選中選項上走的彎路。

正確思路：

1. 數據存儲

   • 先將全部選項存在變量this.options中。

   • 再將選中選項存在變量this.postOptions，由於，無論是前臺拿後臺數據區渲染已選中狀態，仍是前臺最後提交傳給後臺的選中數據，它們都是已選中的選項，所以用同一個變量去接收。（然而天真的我，用了兩個變量。Too young,too simple）

2. 數據渲染

   • 全部選項渲染，就是直接用v-for便可，不作陳述。

   • 已選中狀態，能夠用v-model，也能夠用v-bind:checked。可是考慮到要處理提交的數據，且checked的渲染只能用boolean值渲染，所以選擇用v-model。（然而傻逼的我，居然兩個都用了，呵呵噠）

3. OK，如今數據思路清晰以後，其實也就沒什麼了，主要看後臺和你商量的數據格式。相信深愛JavaScript的咱們都能解決，不行也不要緊，反正也就是Object，String和Array之間的相愛相殺，就toString,join,split,JSON.stringify,JSON.parse，反正我是不懂就去查，哈哈哈哈哈

DEMO:

• CODEPEN-VUE-CHECKBOX-RENDER

傻逼的坑：

• 我在處理的時候，因爲環境沒有如今這麼簡單，個人思路不清晰，因此我考慮的很爛，我居然想着用v-model接收用戶的選中意圖，用v-bind:checked去渲染已選中選項。而後順着思路就用了兩個變量，同時處理v-model和v-bind:checked。這種思路斷不能夠繼續，由於兩個數據原本就是一家，分開處理只會進坑，還不想跳出坑的樣子。

• 幸好我沒在github上開issue，估計尤大想直接懟我，由於我沒有溫故官方文檔，真是笑哭了。官方代表，v-model只是語法糖，尤爲是在checkbox中，checked的狀態就和v-model+value的做用等同。固然提倡v-model，是由於vue賦予了它雙向監聽的強大能力，且不是侷限於boolean判斷。

推薦知識:

• 官方文檔—v-model

• segmentfault上面提出的v-model和checked相關問題

• stackoverflow上面提出的v-model相關問題

• segmentfault上面對於v-model是語法糖的解釋

• 感謝他們。

後：

• 必定要好好想一想v-model數據和value的雙向性。一方向，選中的value值能夠傳到v-model進而造成一個數組，數組裏面是已選中選項的value；一方向，拿到一個帶有部分value的數組，經過v-model能夠和value匹配，變成選中狀態。真的是厲害了。不知道這樣解釋，會不會有問題，歡迎交流。

• 說實在的，各路大神對於我這種小白提的問題，可能只想甩一句，看官方文檔。確實是這樣。由於我在學習官方以後，就會以爲好像都知道了。但其實我尤大真的是厲害了，他在官方文檔中有暗示，若是如今看不懂的地方，之後再看。哈哈哈哈哈

---

——好記性不如難筆頭。