溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
有些時候，不得不想添加、修改數組和對象的值，但是直接添加、修改后又失去了getter、setter。
由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：
1. 利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
2. 修改數組的長度時，例如： vm.items.length = newLength
為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果， 同時也將觸發狀態更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)
避免第二種情況，使用 splice：
example1.items.splice(newLength)
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：
// 代替 `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添加修改數組與對象值時同時將觸發狀態更新的方法，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
