資訊專欄INFORMATION COLUMN
摘要：當(dāng)然按照官方文檔的解釋，檢測(cè)不到的主要問題是導(dǎo)致的。下列代碼，是解決數(shù)組檢測(cè)不到的問題。
測(cè)試數(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}]},
]
難點(diǎn)：
items是個(gè)數(shù)組，里面嵌套著許多層對(duì)象。當(dāng)然數(shù)據(jù)是不一樣的，我這里只是舉例說明。
這里面存在著二個(gè)難點(diǎn)，第一，直接改變items數(shù)量，vue是檢測(cè)不到的。第二，增加items[i]里的對(duì)象屬性。vue也是檢測(cè)不到。
當(dāng)然按照vue官方文檔的解釋，檢測(cè)不到的主要問題是JavaScript導(dǎo)致的。（尤雨溪大佬你說的算）
代碼：
// 解決辦法
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))
// 實(shí)際應(yīng)用
this.items.forEach((r, row) => { // 變量數(shù)組，給每個(gè)對(duì)象附上默認(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
}))
})
這里解釋一下，下列代碼，是解決對(duì)象不能檢測(cè)的問題，這里是一次性添加多個(gè)屬性的方法。
let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })
下列代碼，是解決數(shù)組檢測(cè)不到的問題。(對(duì)象也可以用這個(gè)方法)
index--索引 "age"|| 13 分別代表對(duì)象里的 鍵||值
this.$set(this.items, index, test)) // 數(shù)組方法 this.$set(this.items[index], "age", 13)) // 對(duì)象方法
以上解決方法代碼，來自vue官方文檔鏈接描述, 看不懂就自己按照文檔的去敲一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102521.html
摘要：這里加了個(gè)簡(jiǎn)單判斷，只看數(shù)組元素的，然后寫了一個(gè)簡(jiǎn)單案例，主要測(cè)試使用改變數(shù)組元素能不能被監(jiān)測(cè)到，并響應(yīng)式的渲染頁(yè)面運(yùn)行頁(yè)面可以看到，運(yùn)行了次，我們數(shù)組長(zhǎng)度為，也就是說數(shù)組被遍歷了兩遍。 問題來源：https://segmentfault.com/q/10... 問題描述：Vue檢測(cè)數(shù)據(jù)的變動(dòng)是通過Object.defineProperty實(shí)現(xiàn)的，所以無法監(jiān)聽數(shù)組的添加操作是可以理解的...
摘要：在日常開發(fā)中，我們用的最多的就是綁定數(shù)據(jù)內(nèi)容如果你有的開發(fā)經(jīng)驗(yàn)，假設(shè)你要更新數(shù)據(jù)了但是這在中并不會(huì)起到作用，并沒有觸發(fā)變化。如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動(dòng)力。在日常開發(fā)中，我們用的最多的就是 綁定數(shù)據(jù) 如果你有ng的開發(fā)經(jīng)驗(yàn)，假設(shè) data 你要更新數(shù)據(jù)了 this.data=res.data; 但是這在vue中 并不會(huì)起到作用，DOM并沒有觸發(fā)變化。 ...
摘要：由于是需要兼容的后臺(tái)系統(tǒng)，該項(xiàng)目并不能使用到等技術(shù)，因此我在上的經(jīng)驗(yàn)大都是使用原生的編寫的，可以看見一個(gè)組件分為兩部分視圖部分，和數(shù)據(jù)部分。 在公司里幫項(xiàng)目組里開發(fā)后臺(tái)系統(tǒng)的前端項(xiàng)目也有一段時(shí)間了。 vue這種數(shù)據(jù)驅(qū)動(dòng)，組件化的框架和react很像，從一開始的快速上手基本的開發(fā)，到后來開始自定義組件，對(duì)element UI的組件二次封裝以滿足項(xiàng)目需求，期間也是踩了不少坑。由于將來很長(zhǎng)一...
摘要：響應(yīng)式原理為了探究這一切的原因，我再次點(diǎn)開了的官網(wǎng)。在官網(wǎng)很下面的位置，找到了關(guān)于響應(yīng)式原理的說明。因此，新添加到數(shù)組中的對(duì)象中的屬性，就成了非響應(yīng)式的屬性了，改變它自然不會(huì)讓組件重新渲染。響應(yīng)式屬性的對(duì)象，有這個(gè)對(duì)象就代表是響應(yīng)式的。 ??最近在用Vue開發(fā)一個(gè)后臺(tái)管理的demo，有一個(gè)非常常規(guī)的需求。然而這個(gè)常規(guī)的需求中，包含了大量的知識(shí)點(diǎn)。有一個(gè)產(chǎn)品表格，用來顯示不同產(chǎn)品的信息。...
摘要：前言最近在學(xué)習(xí)框架的基本原理，看了一些技術(shù)博客以及一些對(duì)源碼的簡(jiǎn)單實(shí)現(xiàn)，對(duì)數(shù)據(jù)代理數(shù)據(jù)劫持模板解析變異數(shù)組方法雙向綁定有了更深的理解。 前言 最近在學(xué)習(xí)vue框架的基本原理，看了一些技術(shù)博客以及一些對(duì)vue源碼的簡(jiǎn)單實(shí)現(xiàn)，對(duì)數(shù)據(jù)代理、數(shù)據(jù)劫持、模板解析、變異數(shù)組方法、雙向綁定有了更深的理解。于是乎，嘗試著去實(shí)踐自己學(xué)到的知識(shí)，用vue的一些基本原理實(shí)現(xiàn)一個(gè)簡(jiǎn)單的todo-list，完成...
閱讀 2199·2021-11-15 11:38
閱讀 1161·2021-09-06 15:02
閱讀 3399·2021-08-27 13:12
閱讀 1369·2019-08-30 14:20
閱讀 2404·2019-08-29 15:08
閱讀 648·2019-08-29 14:08
閱讀 1733·2019-08-29 13:43
閱讀 1468·2019-08-26 12:11
