亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記錄vue不能檢測數(shù)組和對象變動的方法。

Clect / 2254人閱讀

摘要：當(dāng)然按照官方文檔的解釋，檢測不到的主要問題是導(dǎo)致的。下列代碼，是解決數(shù)組檢測不到的問題。

測試數(shù)據(jù)：

  items: [
    {name: "業(yè)務(wù)狀態(tài)", id: "taskState", data: [{name:"全部", id: 0},{name:"進(jìn)行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業(yè)務(wù)狀態(tài)", id: "taskState", data: [{name:"全部", id: 0},{name:"進(jìn)行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業(yè)務(wù)狀態(tài)", id: "taskState", data: [{name:"全部", id: 0},{name:"進(jìn)行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業(yè)務(wù)狀態(tài)", id: "taskState", data: [{name:"全部", id: 0},{name:"進(jìn)行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
  ]

難點：

items是個數(shù)組，里面嵌套著許多層對象。當(dāng)然數(shù)據(jù)是不一樣的，我這里只是舉例說明。

這里面存在著二個難點，第一，直接改變items數(shù)量，vue是檢測不到的。第二，增加items[i]里的對象屬性。vue也是檢測不到。

當(dāng)然按照vue官方文檔的解釋，檢測不到的主要問題是JavaScript導(dǎo)致的。（尤雨溪大佬你說的算）

代碼：

// 解決辦法    
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))

// 實際應(yīng)用
this.items.forEach((r, row) => { // 變量數(shù)組，給每個對象附上默認(rèn)值
    this.$set(this.items, row, Object.assign({}, this.items[row], {
      thisActive: r.thisActive ? r.thisActive : 0,
      defaultActive: r.defaultActive ? r.defaultActive : 0,
      data: r.data ? r.data : [],
      pageIndex: r.pageIndex ? r.pageIndex : 1,
      pageSize: r.pageSize ? r.pageSize : 20,
      options: r.options ? r.options : {scrollbar: true, pullUpLoad: true},
      ref: r.ref ? r.ref : "scroll" + row
    }))
})

這里解釋一下，下列代碼，是解決對象不能檢測的問題，這里是一次性添加多個屬性的方法。

let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })

下列代碼，是解決數(shù)組檢測不到的問題。(對象也可以用這個方法)
index--索引 "age"|| 13 分別代表對象里的 鍵||值

this.$set(this.items, index, test)) // 數(shù)組方法
this.$set(this.items[index], "age", 13)) // 對象方法

以上解決方法代碼，來自vue官方文檔鏈接描述, 看不懂就自己按照文檔的去敲一下。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102521.html

相關(guān)文章

  • 記一次思否問答的問題思考：Vue為什么不能檢測數(shù)組變動

    摘要：這里加了個簡單判斷，只看數(shù)組元素的，然后寫了一個簡單案例，主要測試使用改變數(shù)組元素能不能被監(jiān)測到，并響應(yīng)式的渲染頁面運行頁面可以看到，運行了次，我們數(shù)組長度為，也就是說數(shù)組被遍歷了兩遍。 問題來源：https://segmentfault.com/q/10... 問題描述：Vue檢測數(shù)據(jù)的變動是通過Object.defineProperty實現(xiàn)的，所以無法監(jiān)聽數(shù)組的添加操作是可以理解的...

    raoyi 評論0 收藏0

  • vue 關(guān)于數(shù)組和對象的更新

    摘要：在日常開發(fā)中，我們用的最多的就是綁定數(shù)據(jù)內(nèi)容如果你有的開發(fā)經(jīng)驗，假設(shè)你要更新數(shù)據(jù)了但是這在中并不會起到作用，并沒有觸發(fā)變化。如果對您有幫助請動動鼠標(biāo)右下方給我來個贊，您的支持是我最大的動力。在日常開發(fā)中，我們用的最多的就是 綁定數(shù)據(jù) 如果你有ng的開發(fā)經(jīng)驗，假設(shè) data 你要更新數(shù)據(jù)了 this.data=res.data; 但是這在vue中 并不會起到作用，DOM并沒有觸發(fā)變化。 ...

    番茄西紅柿 評論0 收藏0

  • vue總結(jié)系列--數(shù)據(jù)驅(qū)動和響應(yīng)式

    摘要：由于是需要兼容的后臺系統(tǒng)，該項目并不能使用到等技術(shù)，因此我在上的經(jīng)驗大都是使用原生的編寫的，可以看見一個組件分為兩部分視圖部分，和數(shù)據(jù)部分。 在公司里幫項目組里開發(fā)后臺系統(tǒng)的前端項目也有一段時間了。 vue這種數(shù)據(jù)驅(qū)動，組件化的框架和react很像，從一開始的快速上手基本的開發(fā)，到后來開始自定義組件，對element UI的組件二次封裝以滿足項目需求，期間也是踩了不少坑。由于將來很長一...

    AbnerMing 評論0 收藏0

  • 從數(shù)組入手淺析Vue響應(yīng)式原理

    摘要：響應(yīng)式原理為了探究這一切的原因，我再次點開了的官網(wǎng)。在官網(wǎng)很下面的位置，找到了關(guān)于響應(yīng)式原理的說明。因此，新添加到數(shù)組中的對象中的屬性，就成了非響應(yīng)式的屬性了，改變它自然不會讓組件重新渲染。響應(yīng)式屬性的對象，有這個對象就代表是響應(yīng)式的。 ??最近在用Vue開發(fā)一個后臺管理的demo，有一個非常常規(guī)的需求。然而這個常規(guī)的需求中，包含了大量的知識點。有一個產(chǎn)品表格，用來顯示不同產(chǎn)品的信息。...

    dkzwm 評論0 收藏0

  • 用vue框架的基本原理，簡單實現(xiàn)一個todo-list

    摘要：前言最近在學(xué)習(xí)框架的基本原理，看了一些技術(shù)博客以及一些對源碼的簡單實現(xiàn)，對數(shù)據(jù)代理數(shù)據(jù)劫持模板解析變異數(shù)組方法雙向綁定有了更深的理解。 前言 最近在學(xué)習(xí)vue框架的基本原理，看了一些技術(shù)博客以及一些對vue源碼的簡單實現(xiàn)，對數(shù)據(jù)代理、數(shù)據(jù)劫持、模板解析、變異數(shù)組方法、雙向綁定有了更深的理解。于是乎，嘗試著去實踐自己學(xué)到的知識，用vue的一些基本原理實現(xiàn)一個簡單的todo-list，完成...

    Karrdy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<