[Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性

最新推荐文章于 2024-07-17 08:39:25 发布

Alcantara6

最新推荐文章于 2024-07-17 08:39:25 发布

阅读量7.4k

点赞数 2

分类专栏：前端文章 Vue文章文章标签： Vue 数组检测对象检测索引

本文链接：https://blog.csdn.net/Alcantara/article/details/78692432

版权

前端文章同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue文章

5 篇文章 0 订阅

订阅专栏

由于 JavaScript 的限制，Vue 不能检测以下变动的数组

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。

同样，Vue也不能检测对象属性的添加或删除

这有一点需注意，也是差点被教程带进坑里。不是不能使用数组索引，可以使用，使用场景是将对象数组内部的对象属性更新，而不是直接设置修改数组，这就像使用push方法是更新数组而不是设置数组一样。例如对对象数组某项的属性的修改：vm.items[indexOfItem].prop = newValue

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>v-for-item-index</title>
	<style type="text/css"></style>
	<script src = "https://unpkg.com/vue"></script>
</head>
<body>
		<ul id='example-2'>
			<li v-for='(item,index) in items' v-bind:key=item.id>
				{{parentMessage}} - {{index}} - {{item.message}} 
			</li>
			<button @click='insert'>ss</button>
		</ul>
	
	<script>
		var vm = new Vue({
			el: '#example-2',
			data: {
				parentMessage: 'Parent',
				items:[
					{message: '学习JavaScript'},
					{message: '学习jQuery'},
					{message: '学习Vue'}
				]
			},
			methods:{
				//不能触发状态更新，用Vue.set或splice
				insert: function () {
					// 直接赋值不行
					// this.items[1] = ({message: '学习个屁'});
					// 更新数组允许
					this.items[1].message = '学习个屁';
				}
			}
		});
	</script>
</body>
</html>