v-for中对循环的对象内容进行修改时无法实时同步到页面

limit for me

已于 2022-06-27 14:51:03 修改

阅读量478

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2022-04-29 11:19:32 首次发布

本文链接：https://blog.csdn.net/limmt2020/article/details/124491588

版权

js 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

本文探讨了在使用Vue的v-for循环时遇到的对象内容修改无法实时同步到页面的问题。通过示例代码展示了如何在iview框架下，点击按钮触发spin加载效果时，正确修改循环体内对象的属性。重点在于理解 Vue 的响应式原理和$set 方法的使用，以确保数据变化能够被Vue监听并更新视图。

摘要由CSDN通过智能技术生成

v-for中对循环的对象内容进行修改时无法实时同步到页面

这里使用iview框架，实现点击按钮时使spin加载中出现

<Card class="card" v-for="(item, index) in List" :key="index">
	<span class="headBtn" @click="refresh(item,index)">
		<Icon type="ios-refresh" size="20"></Icon>
	</span>
	<span style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">
		{{ item.itemName }}
	</span>
	<Spin size="large" fix v-if="item.spinShow"></Spin>
</Card>

按照平时的赋值，只能修改对象内的数值，直接修改不能被vue监听到

refresh(v,index) {
	console.log(v,index);
	//v为循环体的内容，index为循环的编号以此确认修改的对象
	this.$set(v,'spinShow',true)
	//这里v也就是this.List[index]作为循环的对象，spinShow表示对象中需要修改的属性，true表示要替换的内容
	//...调接口等后续操作
}