uni-app 编辑已提交的bug时,手机OS系统版本和手机厂商数据没有回显且无法编辑,导致无法提交表单

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 编辑已提交的bug时,手机OS系统版本和手机厂商数据没有回显且无法编辑,导致无法提交表单

产品分类

其他/ASK社区

操作步骤

发布bug,类型为uni-app,发行方式选择App,填写所有必填项,【手机OS系统版本】选择iOS18 【手机厂商】选择苹果,提交表单,然后进入刚才提交的bug详情,点击编辑,可以看到【手机OS系统版本】和【手机厂商】数据没有回显,点击提交提示请选择手机OS系统版本

预期结果

能够提交表单

实际结果

无法提交表单

bug描述

编辑已提交的bug时,【手机OS系统版本】和【手机厂商】数据没有回显且无法编辑,导致无法提交表单

img img img


1 回复

针对您提到的uni-app中在编辑已提交的bug时,手机OS系统版本和手机厂商数据没有回显且无法编辑的问题,这通常是由于数据绑定或组件状态管理不当导致的。以下是一个简化的代码示例,展示了如何在uni-app中实现数据的回显和编辑功能。

首先,假设您的数据模型中包含bug对象,其中osVersionmanufacturer分别代表手机OS系统版本和手机厂商。

1. 数据模型定义

在页面的data对象中定义这些数据:

data() {
    return {
        bug: {
            id: null, // 假设bug有一个唯一的ID
            title: '',
            description: '',
            osVersion: '', // OS系统版本
            manufacturer: '' // 手机厂商
            // ... 其他属性
        },
        originalBug: {} // 用于存储原始bug数据,以便编辑时回显
    };
}

2. 获取并回显原始数据

在编辑bug之前,从服务器或其他数据源获取原始bug数据,并赋值给originalBugbug对象:

onLoad(options) {
    const bugId = options.bugId; // 从路由参数中获取bug的ID
    this.fetchBugData(bugId);
},
methods: {
    fetchBugData(id) {
        // 假设fetchBug是一个异步请求函数,返回Promise
        this.fetchBug(id).then(bug => {
            this.originalBug = {...bug}; // 深拷贝原始数据
            this.bug = {...bug}; // 赋值给当前编辑对象
        });
    },
    fetchBug(id) {
        // 这里应该是实际的API请求代码,例如使用uni.request
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    id: 1,
                    title: 'Test Bug',
                    description: 'This is a test bug',
                    osVersion: 'iOS 15.2',
                    manufacturer: 'Apple'
                    // ... 其他属性
                });
            }, 1000);
        });
    }
    // ... 其他方法
}

3. 绑定数据到表单组件

在模板中使用v-model绑定数据到输入框:

<view>
    <input v-model="bug.title" placeholder="Title" />
    <input v-model="bug.description" placeholder="Description" />
    <input v-model="bug.osVersion" placeholder="OS Version" />
    <input v-model="bug.manufacturer" placeholder="Manufacturer" />
    <!-- ... 其他表单项 -->
    <button @click="submitBug">Submit</button>
</view>

4. 提交表单

在提交表单时,可以比较bugoriginalBug对象来决定是否需要更新数据:

methods: {
    submitBug() {
        // 这里应该是提交bug到服务器的代码
        // 如果bug数据有变化,则发送更新请求
        if (JSON.stringify(this.bug) !== JSON.stringify(this.originalBug)) {
            // 发送更新请求的代码
        }
    }
    // ... 其他方法
}

以上代码展示了如何在uni-app中实现bug编辑功能,包括数据的回显和编辑。请根据实际情况调整数据获取和提交的逻辑。

回到顶部