vue將對象新增的屬性添加到檢測序列的方法

更新時間：2018年02月24日 14:41:35 作者：twmay006

下面小編就為大家分享一篇vue將對象新增的屬性添加到檢測序列的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue中將對象中新增的屬性增加到檢測序列中

deepCopy(o1, o2) { // 將o2的內(nèi)容拷貝給data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

由于 Vue 不允許動態(tài)添加根級響應(yīng)式屬性，所以你必須在初始化實例前聲明根級響應(yīng)式屬性，哪怕只是一個空值

如果一個屬性沒有事先聲明，后面再增加，他不能檢測到變化，對于一些固定的結(jié)構(gòu)，是可以檢測到變化的。比如我知道一個obj里面必然有key1、key2屬性，我可以事先初始化。如果這些東西是動態(tài)的，我沒法事先聲明。后面再增加，vue沒法檢測到變化了。

這時將你已經(jīng)在data中聲明的變量和你要賦給這個變量的值作為參數(shù)傳進(jìn)該函數(shù)就行了

以上這篇vue將對象新增的屬性添加到檢測序列的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue el-upload上傳文件的示例代碼
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
高頻率Vue面試題匯總以及答案
vue是組件化開發(fā)框架,所以對于vue應(yīng)用來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于高頻率Vue面試題以及答案的相關(guān)資料,需要的朋友可以參考下
2023-02-02
使用ElementUI el-upload實現(xiàn)一次性上傳多個文件
在日常的前端開發(fā)中,文件上傳是一個非常常見的需求,尤其是在用戶需要一次性上傳多個文件的場景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫,為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實現(xiàn)一次性上傳多個文件,需要的朋友可以參考下
2024-08-08
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時間是一項常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時間,需要的朋友可以參考下
2024-01-01
關(guān)于el-scrollbar滾動條初始化不顯示的問題及解決
這篇文章主要介紹了關(guān)于el-scrollbar滾動條初始化不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用vue構(gòu)建多頁面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁面應(yīng)用的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
Vue中常見的幾種傳參方式小結(jié)
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
Vue下載不同文件的幾種方式總結(jié)
在Vue項目中實現(xiàn)文件下載有多種方式,包括使用window.open、<a>標(biāo)簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標(biāo)簽等,每種方法都有其適用場景,開發(fā)者可以根據(jù)項目需求選擇最合適的方式
2025-01-01
Vue中用watch一次監(jiān)聽多個值變化的示例詳解
在Vue中,watch 本身不能監(jiān)聽多個變量,但我們可以通過返回具有計算屬性的對象然后監(jiān)聽該對象,從而實現(xiàn)一次性“監(jiān)聽多個變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個值變化的示例,需要的朋友可以參考下
2024-01-01