經過數組的變異方法咱們可讓視圖隨着數據變化而變化。但Vue 不能檢測對象屬性的添加或刪除,即若是操做對象數據變化,視圖是不會隨着對象數據變化而變化的。使用Vue.set()能夠幫助咱們解決這個問題。數組
可多選的列表:
網絡
tag: [ { name: "馬化騰" }, { name: "馬雲" }, { name: "劉強東" }, { name: "李彥宏" }, { name: "比爾蓋茨" }, { name: "扎克伯格" } ],
<div class="choice-tag"> <ul class="d-f fd-r jc-fs ai-c fw-w"> //夢想經過判斷每一個item的checked的布爾值來決定選中或未選中 <li :class="tag[index].checked == true? 'choice-tag-check':''" v-for="(item,index) in tag" :key="item.id" @click="choiceTagFn(index)"> {{item.name}} </li> </ul> </div> .choice-tag-check{ border: 1px solid #2d8cf0 !important; color: #2d8cf0 !important; }
一開始的想法是將靜態數據(或網絡請求的數據)添加一個新的字段,經過修改checked爲true或false來判斷選中狀態。this
mounted() { for(let i = 0 ; i<this.tag.length;i++){ this.tag[i].checked = false } }
console.log(this.tag)一下spa
都添加上了,感受一切順利,有點美滋滋。3d
//選擇標籤 choiceTagFn(index) { if(this.tag[index].checked === false){ this.tag[index].checked = true }else{ this.tag[index].checked = false } },
隨便選兩個,而後再console.log(this.tag)一下code
數據層tag的checked值已經發生改變,然鵝~~~對象
視圖層是一動不動,說好的響應式呢?blog
查閱文檔後找到了緣由:因爲 JavaScript 的限制,Vue 不能檢測對象屬性的添加或刪除索引
那怎麼辦?官方的說法是:對於已經建立的實例,Vue 不能動態添加根級別的響應式屬性。可是,可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。圖片
Vue.set( object, key, value )
object:須要更改的數據(對象或者數組)
key:須要更改的數據
value :從新賦的值
咱們再也不使用for來給對象添加字段,而是使用一個新的數組來展現選中與未選中狀態
tag: [ { name: "馬化騰" }, { name: "馬雲" }, { name: "劉強東" }, { name: "李彥宏" }, { name: "比爾蓋茨" }, { name: "扎克伯格" } ], //是否選中 tagCheck:[false,false,false,false,false,false],
咱們就再也不直接操做數據,而是操做新的數組
<div class="choice-tag"> <ul class="d-f fd-r jc-fs ai-c fw-w"> <li :class="tagCheck[index] == true? 'choice-tag-check':''" v-for="(item,index) in tag" :key="item.id" @click="choiceTagFn(index)"> {{item.name}} </li> </ul> </div>
咱們可使用this.$set來代替Vue.set
//選擇標籤 choiceTagFn(index) { if(this.tagCheck[index] === false){ //(更改源,更改源的索引,更改後的值) this.$set( this.tagCheck, index, true ) }else{ //(更改源,更改源的索引,更改後的值) this.$set( this.tagCheck, index, false ) } },
就大功告成啦實現了列表多選,視圖會根據數據(數組,對象)的變化而變化。