使用Vue.set完成視圖隨着對象修改動態變化(列表多選)

經過數組的變異方法咱們可讓視圖隨着數據變化而變化。但Vue 不能檢測對象屬性的添加或刪除,即若是操做對象數據變化,視圖是不會隨着對象數據變化而變化的。使用Vue.set()能夠幫助咱們解決這個問題。數組

需求:

可多選的列表:
圖片描述網絡

圖片描述

初始代碼:

準備好的數據:

tag: [
        { name: "馬化騰" },
        { name: "馬雲" },
        { name: "劉強東" },
        { name: "李彥宏" },
        { name: "比爾蓋茨" },
        { name: "扎克伯格" }
      ],

template&CSS:

<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

選擇方法methods:

//選擇標籤
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()

Vue.set( object, key, value )

object:須要更改的數據(對象或者數組)

key:須要更改的數據

value :從新賦的值

更改後的代碼

咱們再也不使用for來給對象添加字段,而是使用一個新的數組來展現選中與未選中狀態

新的數據:

tag: [
        { name: "馬化騰" },
        { name: "馬雲" },
        { name: "劉強東" },
        { name: "李彥宏" },
        { name: "比爾蓋茨" },
        { name: "扎克伯格" }
      ],
 //是否選中
 tagCheck:[false,false,false,false,false,false],

咱們就再也不直接操做數據,而是操做新的數組

新的template&CSS:

<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>

新的選擇方法methods:

咱們可使用this.$set來代替Vue.set

//選擇標籤
choiceTagFn(index) {
  if(this.tagCheck[index] === false){
    //(更改源,更改源的索引,更改後的值)
    this.$set( this.tagCheck, index, true )
  }else{
    //(更改源,更改源的索引,更改後的值)
    this.$set( this.tagCheck, index, false )
  }
},

就大功告成啦實現了列表多選,視圖會根據數據(數組,對象)的變化而變化。

若是有錯誤或者更簡單的方法,歡迎大力指出~~~

相關文章
相關標籤/搜索