1. 程式人生 > >vue 中 如何修改【陣列中】【物件的值】,解決步驟如下

vue 中 如何修改【陣列中】【物件的值】,解決步驟如下

vue 中 如何修改【陣列中】【物件的值】

在這裡插入圖片描述

通過陣列的變異方法(Vue陣列變異方法)我們可以動態控制資料的增減,但是我們卻無法做到對某一條資料的修改。這時候就需要Vue的內建方法來幫忙了~

vue 中是無法檢測到根據索引值修改的資料變動的
但 你可以這樣做

// 第一個引數是要修改的資料, 第二個值是修改當前陣列的哪一個欄位,第三個是要修改為什麼值
// 要修改的資料: 根據索引值你可以拿到陣列中的第 `index`條資料: `this.iptDatas[index]`
// 前陣列的哪一個欄位: `showAlert`
// 修改為 `true`

this.$set(this.iptDatas[index], `showAlert`, true)
或者
Vue.set(this.iptDatas[index], `showAlert`, true)

Vue.set() 響應式新增與修改資料

此時我們需要知道Vue.set()需要哪些引數,官方API:Vue.set()

呼叫方法:Vue.set( target, key, value )

target:要更改的資料來源(可以是物件或者陣列)
key:要更改的具體資料
value :重新賦的值

this.iptDatas[index].showAlert = true;
Vue.set(this.iptDatas, index, this.iptDatas[index]);

注意: 要用ES6語法 ``

親測有用