Uniapp 实现数组对象列表编辑功能:从A页面跳转到B页面修改数据
实现这个功能,可以按照以下步骤进行:
A页面:
- 在A页面的data中定义一个list数组,用来存储从后端传过来的数据。
- 在A页面的方法中,定义一个函数用于处理编辑按钮的点击事件,点击编辑按钮后跳转到B页面,并将点击的数组对象传递给B页面。
- 在A页面的方法中,定义一个函数用于接收B页面传回的修改数据,并更新A页面的list数组。
- 在A页面的方法中,定义一个函数用于提交修改的数据给后端。
B页面:
- 在B页面的data中定义一个formData对象,用来存储需要修改的数据。
- 在B页面的onLoad生命周期函数中,接收A页面传递过来的数组对象,并将其赋值给formData。
- 在B页面的方法中,定义一个函数用于处理确认修改按钮的点击事件,点击确认修改按钮后将修改后的数据传递给A页面。
- 在B页面的方法中,定义一个函数用于更新formData中的数据。
具体代码示例:
A页面代码:
<template>
<view>
<!-- 显示list的内容 -->
<view v-for='(item, index) in list' :key='index'>
<text>{{ item.name }}</text>
<!-- 编辑按钮 -->
<button @click='editItem(index)'>编辑</button>
</view>
<!-- 确认修改按钮 -->
<button @click='confirmEdit'>确认修改</button>
</view>
</template>
<script>
export default {
data() {
return {
list: [] // 从后端传过来的list数据
}
},
methods: {
// 编辑按钮点击事件
editItem(index) {
uni.navigateTo({
url: '/pages/BPage?item=' + JSON.stringify(this.list[index])
})
},
// 确认修改按钮点击事件
confirmEdit() {
// 遍历list数组提交修改的数据给后端
this.list.forEach(item => {
// 提交给后端的代码
})
},
// 接收B页面传回的修改数据
receiveEditData(data) {
this.list = data;
}
}
}
</script>
B页面代码:
<template>
<view>
<!-- 显示需要修改的数据 -->
<input v-model='formData.name' />
<!-- 确认修改按钮 -->
<button @click='confirmEdit'>确认修改</button>
</view>
</template>
<script>
export default {
data() {
return {
formData: {} // 需要修改的数据存储在formData中
}
},
onLoad(option) {
// 接收A页面传递过来的数组对象,并赋值给formData
this.formData = JSON.parse(option.item);
},
methods: {
// 确认修改按钮点击事件
confirmEdit() {
// 将修改后的数据传递给A页面
uni.navigateBack({
delta: 1, // 返回到上一个页面
success: () => {
const pages = getCurrentPages();
const prevPage = pages[pages.length - 1];
prevPage.receiveEditData(this.formData);
}
});
}
}
}
</script>
以上是基于uni-app框架的代码示例,其中A页面通过uni.navigateTo方法跳转到B页面,并通过URL参数传递需要修改的数组对象,B页面通过uni.navigateBack方法返回到A页面,并将修改后的数据通过receiveEditData方法传递给A页面。A页面通过遍历list数组将修改的数据提交给后端。
请注意,以上代码只是示例,具体的实现方式可能根据你的业务需求有所不同,你需要根据实际情况进行调整。
原文地址: https://www.cveoy.top/t/topic/eBxs 著作权归作者所有。请勿转载和采集!