使用v-for渲染时，新增数据后，页面没更新

Posted 2021-12-29 web半晨

目录

• 1、错误写法
• 2、正确写法
• 3、JavaScript部分
• 4、总结

---

1、错误写法

<div v-for="item in list" :key="item.id">
	<span v-text="item.title"></span>
</div>

---

2、正确写法

<div>
	<div v-for="item in list" :key="item.id">
		<span v-text="item.title"></span>
	</div>
</div>

---

3、javascript部分

import  getData  from "@/api/getData/index.js";
export default 
	data() 
		return 
			list: []
		;
	,

	methods: 
		async getList() 
			let  result  = await getData();
			this.list = [...result];
		
	,
;

---

4、总结

其实就是在v-for标签外包裹一个父级标签。