多選框是一種非常常見的功能,有時候我們會根據后台返回的數據進行多選框渲染,之前做項目時遇到循環生成多選框時,v-model綁定的值會隨着選中與取消改變,但頁面卻不會變化
的情況,后來測試了一下,發現多選框的數據類似只能在頁面上渲染一次.先看一下我項目中遇到的情況:
頁面渲染出來的效果是這樣的,根據后台數據循環生成的
后台返回的數據:
一開始我是先把后台的值賦值給頁面需要渲染的數據,在遍歷數據增加一個ischeck值來控制多選框的選擇
HTML代碼
但是這樣渲染出來之后,發現頁面的選擇框勾選不了,而且選擇框的isCheck值一直為true
於是改變后台數據的處理,改為先給后台數據加上isCheck這個值,再賦值給頁面渲染的data,這樣渲染之后就能夠勾選
思考了一下,大概是因為一開始賦值之后,頁面已經渲染了,之后再加的數據沒有放入Vue數據的監聽中,所以在Vue中,如果是數據賦值,最好把數據處理好后再賦值,避免賦值后二次操作