uniapp使用v-for页面不刷新解决办法

项目场景:

做一个项目,v-for循环数据库数据,使用uni-load-more,结果发现...

DOM中的列表却没有更新


解决方案:

根据网上教程,加了一个触底函数onReachBottom,结果发现无论如何也更新不了DOM中的数据,最后将触底函数改成手动click触发。

更改后的相关代码如下

html 复制代码
// 视图层
<view v-if="refresh" v-for="data in dataList" :key="data.id">
	{{ data.名称 }}
</view>
<view @click="test">
	<uni-load-more :status="status" :content-text="contentText" v-if="dataList.length > 0" />
</view>

// 脚本层
<script>
	export default {
		data() {
			return {
				status: 'more',
				contentText: {
					contentdown: '点击加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
			}
		},
		methods: {
			test(){
				if (this.status != 'noMore') {
						console.log("触底")
						this.status = 'loading';
						this.ifBottomRefresh = true
						// 再次调用接口
						this.getList()
				} else {
					this.status ="noMore"
				}
			}
		}
	}
</script>
相关推荐
前端Hardy20 分钟前
HTML&CSS:3D图片切换效果
前端·javascript
spionbo41 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝42 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
lyc23333342 分钟前
鸿蒙Core File Kit:极简文件管理指南📁
前端
我这里是好的呀42 分钟前
全栈开发个人博客12.嵌套评论设计
前端·全栈
我这里是好的呀44 分钟前
全栈开发个人博客13.AI聊天设计
前端·全栈
金金金__44 分钟前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element
lyc2333331 小时前
小L带你看鸿蒙应用升级的数据迁移适配📱
前端
用户26812851066691 小时前
react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)
前端