使用Vue.set完成視圖隨著對象修改動態變化（列表多選）

TerryCai 發布于2019-08-26 12:10 / 1700人閱讀

摘要：但不能檢測對象屬性的添加或刪除，即如果操作對象數據變化，視圖是不會隨著對象數據變化而變化的。但是，可以使用方法向嵌套對象添加響應式屬性。

通過數組的變異方法我們可以讓視圖隨著數據變化而變化。但Vue 不能檢測對象屬性的添加或刪除，即如果操作對象數據變化，視圖是不會隨著對象數據變化而變化的。使用Vue.set()可以幫助我們解決這個問題。

需求：

可多選的列表：

初始代碼： 準備好的數據：

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

template&CSS：


  
      //夢想通過判斷每個item的checked的布爾值來決定選中或未選中
    
      {{item.name}}
    
  


.choice-tag-check{
  border: 1px solid #2d8cf0 !important;
  color: #2d8cf0 !important;
}

一開始的想法是將靜態數據（或網絡請求的數據）添加一個新的字段，通過修改checked為true或false來判斷選中狀態。

mounted() {
    for(let i = 0 ; i
console.log(this.tag)一下

都添加上了，感覺一切順利，有點美滋滋。
選擇方法methods：
 //選擇標簽
choiceTagFn(index) {
  if(this.tag[index].checked === false){
    this.tag[index].checked = true
  }else{
    this.tag[index].checked = false
  }
},
隨便選兩個，然后再console.log(this.tag)一下

數據層tag的checked值已經發生改變，然鵝~~~
視圖層是一動不動，說好的響應式呢？
查閱文檔后找到了原因：由于 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：

  
    
      {{item.name}}
    
  


新的選擇方法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 )
  }
},
就大功告成啦實現了列表多選，視圖會根據數據（數組，對象）的變化而變化。
如果有錯誤或者更簡單的方法，歡迎大力指出~~~

云服務器 GPU云服務器列表視圖列表視圖控件 jsp多選列表框 asp 下拉列表多選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108163.html

Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
Vue面試中，經常會被問到的面試題/知識點(2019改進版)

摘要：在第一版的基礎上進行了優化，新增一些面試題知識點，對一些知識點進行更加深入的描述。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。改變中的狀態的唯一途徑就是顯式地提交。這兩個可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄。在第一版的基礎上進行了優化，新增一些面試題/知識點，對一些知識點進行更加深入的描述。一、對于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 評論0 收藏0
VUE2.0學習筆記

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
深入淺出Vue響應式原理

摘要：總結最后我們依照下圖參考深入淺出，再來回顧下整個過程在后，會調用函數進行初始化，也就是過程，在這個過程通過轉換成了的形式，來對數據追蹤變化，當被設置的對象被讀取的時候會執行函數，而在當被賦值的時候會執行函數。前言 Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解...

yiliang 2019-08-23 18:34 評論0 收藏0
VUE

摘要：注意指令前面需要加，對指令傳遞數據賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現自定義指令注冊完成。 vue Vue.js 構建數據驅動的web界面庫。集中實現MVVM 的 VM層。容易與其他庫或項目整合通過盡可能簡單的API實現相應的數據綁定和組合的視圖組件核心：相應的數據綁定系統，數據與DOM保持同步數據驅動的視圖，普通的HTML模板中使用特殊的語...

bergwhite 2019-08-19 18:39 評論0 收藏0