Vue響應(yīng)式添加、修改數(shù)組和對(duì)象的值
有些時(shí)候，不得不想添加、修改數(shù)組和對(duì)象的值，但是直接添加、修改后又失去了getter、setter。
由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
1. 利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
2. 修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength
為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue 的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)
避免第二種情況，使用 splice：
example1.items.splice(newLength)
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你想向已有對(duì)象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來(lái)添加屬性。但是，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象，讓它包含原對(duì)象的屬性和新的屬性：
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)
示例代碼:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ol>
<li v-for="data in list">{{data.id}} - {{data.name}}</li>
</ol>
</div>
<script type="text/javascript" src="../underscore/underscore-min.js"></script>
<script type="text/javascript" src="./vue.2.1.8.min.js"></script>
<script type="text/javascript">
var oVue = new Vue({
el : '#app',
data : {
list : [
{id : 5},
{id : 6}
]
}
});
</script>
</body>
</html>
以上就是VueI添加修改數(shù)組與對(duì)象值時(shí)同時(shí)將觸發(fā)狀態(tài)更新的方法，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線,?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下2022-04-04
vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決
這篇文章主要介紹了vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了詳解如何更好的使用module vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了vue生命周期的探索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue項(xiàng)目中如何使用TypeScript相關(guān)配置
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開(kāi)發(fā)過(guò)程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup。這篇文章將為大家詳細(xì)介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下2022-07-07
記錄--使用el-time-picker默認(rèn)值遇到的問(wèn)題
這篇文章主要介紹了記錄--使用el-time-picker默認(rèn)值遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-froala-wysiwyg 富文本編輯器功能，分步驟給大家介紹了vue3.中如何安裝使用froala,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03