2. Vue 修改数组内容不响应问题

最新推荐文章于 2023-10-24 16:44:13 发布

白怀宇

最新推荐文章于 2023-10-24 16:44:13 发布

阅读量965

点赞数

分类专栏： Vue2 经验总结文章标签： vue

本文链接：https://blog.csdn.net/b342216980/article/details/106888264

版权

Vue2 经验总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue 修改数组内容不响应问题

问题现象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 修改数组内容不响应问题</title>
</head>
<body>

<div id="app">
	<ul>
		<li v-for="item in list">{{ item }}</li>
	</ul>
	<input type="button" value="修改第二个元素" @click="changeData">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	app = new Vue({
		data:{
			list: [1,2,3,4,5]
		},
		methods:{
			changeData(){
				this.list[1] = '数据被修改'
				console.log(this.list)
			}
		}
	}).$mount('#app')
</script>

</body>
</html>

当列表中的数据被修改是，Vue无法响应数据进行渲染。

问题原因
- Vue不是所有对数据的操作都是响应式的。
解决方案
- 采用javascript的splice方法修改。

采用Vue的set方法进行修改。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue修改数组内容不响应问题</title>
</head>
<body>

<div id="app">
	<ul>
		<li v-for="item in list">{{ item }}</li>
	</ul>
	<input type="button" value="修改第二个元素" @click="changeData">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	app = new Vue({
		data:{
			list: [1,2,3,4,5]
		},
		methods:{
			changeData(){
				this.list.splice(1, 1, '数据被修改')  // 推荐使用这种
				// Vue.set(this.list, 1, '数据被修改')
				console.log(this.list)
			}
		}
	}).$mount('#app')
</script>

</body>