vue 元件中陣列的更新

今天寫專案時遇到的問題,瞬間就卡在那了

來還原一下:

parent.vue:

change

for="item in list" :key="item.id" :list="item.list">

child.vue

}}}

我預想中的正常情況應該是點選按鈕,,然後 頁面上的 000 000 000 變成 000 123 000 ,

但是就是沒有變化看了下 vue 文件先試試是不是子元件檢測的值出了問題,

然後我在子元件中新增了 watch和 computed 結果都是無效的;

後來我搜尋了頁面,發了了乙個全域性函式 :

vue.set();

他的效果:

返回值：設定的值。

用法：設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 vue 不能檢測屬性被新增的限制。

終於被我找到了關鍵的地方了,但是在元件中怎麼使用全域性指令呢?

我後面又發現了 this.$set這個函式是完全一樣的;

所以高興的用上了:

正確用法:

methods://這樣寫 data 並不會檢測

this.$set(this.list[1],'list',)//正確的寫法

},1000)

}

這個坑,浪費了我幾個小時,雖然我用 v-if 也解決了,但是總是不甘心,晚上繼續研究終於讓我解決了;

引以為戒;

VUE 陣列更新

1 資料方法分類 1 原陣列改變 push pop unshift shift reverse sort splice 2 原陣列未變，生成新陣列 slice concat filter map 對於使原陣列變化的方法，可以直接更新檢視。對於原陣列未變的方法，可以使用新陣列替換原來的陣列，以使檢視發...

vue中的元件

2019年8月17日 使用vue.extend來建立全域性的vue元件 使用vue.extend來建立全域性的vue元件 var com1 vue.extend 使用vue.component 元件的名稱 建立出來的元件模板物件 如果使用vue component定義全域性元件的時候,元件名稱使用了...

Vue中的陣列變異的方法 （陣列更新檢測）

vue 包含一組觀察陣列的變異方法，它們將會觸發檢視更新 push 新增在末尾乙個元素，返回值是修改後陣列的長度 unshift新增在首未尾部,返回的是修改後的陣列的長度 pop 刪除末尾的元素,返回值是刪除的元素 shift 前面刪除的元素,返回值是刪除的元素 splice 刪除原陣列的一部分成員...