在Vue中迴圈生成多選框CheckBox時的注意事項
阿新 • • 發佈:2018-11-05
多選框是一種非常常見的功能,有時候我們會根據後臺返回的資料進行多選框渲染,之前做專案時遇到迴圈生成多選框時,v-model繫結的值會隨著選中與取消改變,但頁面卻不會變化
的情況,後來測試了一下,發現多選框的資料類似只能在頁面上渲染一次.先看一下我專案中遇到的情況:
頁面渲染出來的效果是這樣的,根據後臺資料迴圈生成的
後臺返回的資料:
一開始我是先把後臺的值賦值給頁面需要渲染的資料,在遍歷資料增加一個ischeck值來控制多選框的選擇
HTML程式碼
但是這樣渲染出來之後,發現頁面的選擇框勾選不了,而且選擇框的isCheck值一直為true
於是改變後臺資料的處理,改為先給後臺資料加上isCheck這個值,再賦值給頁面渲染的data,這樣渲染之後就能夠勾選
思考了一下,大概是因為一開始賦值之後,頁面已經渲染了,之後再加的資料沒有放入Vue資料的監聽中,所以在Vue中,如果是資料賦值,最好把資料處理好後再賦值,避免賦值後二次操作
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105152751715-1295879376.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105152828998-1812627120.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105152903083-529338085.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105152942512-1970305994.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105153009275-914265641.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105153034634-1960689048.png)
![](https://img2018.cnblogs.com/blog/1349812/201811/1349812-20181105153103446-1018201877.png)