uni-app中uni.showModal无法给页面控件赋值

uni-app中uni.showModal无法给页面控件赋值

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：Android

手机系统版本号：Android 10

手机厂商：模拟器

手机机型：OPPO

页面类型：vue

打包方式：云端

示例代码：


onLoad(e){  
    if (!e.id)  
    {  
        return this.navigateTo({  
            url: '../addTask/addTask'  
        });  
    }  
    this.data.taskType = e.id;  
    var pushtask = uni.getStorageSync('pushtask');  
    if(pushtask){             
        //this.data = pushtask.data; //如果写在这里就页面上的input的v-model正常  
        uni.showModal({  
            content: '检测到您上次有未编辑完成的任务,是否继续编辑？',  
            cancelText: '取消',  
            confirmText: '确认',  
            confirmColor: '#f55850',  
            cancelColor: '#39B54A',  
            success: res => {  
                if (res.confirm) {  
                    this.data = pushtask.data;//写在这个位置就无效,input无内容  
                }  
            }  
        });  
    }  
},

操作步骤：

  • 弹框点确定后页面控件无内容

预期结果：

  • input的v-model应该赋值成功

实际结果：

  • input的v-model双向绑定无内容

bug描述：

  • uni.showModal中无法给页面控件赋值

更多关于uni-app中uni.showModal无法给页面控件赋值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

经测试 <template v-slot:right="">
<input type="text" placeholder="请输入项目名字" style="font-size: 28rpx;width: 475rpx;" v-model="data.projectName" maxlength="32" />
</template> 控件放在<template>中就不显示数据, 不放在这里面就没有问题

更多关于uni-app中uni.showModal无法给页面控件赋值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也是这个问题

bug还没修吗？？？我擦

在uni-app中，this.data直接赋值不会触发Vue的响应式更新。当您在uni.showModal的success回调中对this.data进行赋值时，虽然数据改变了，但页面不会重新渲染。

这是因为Vue的响应式系统无法检测到对象属性的直接替换。正确的做法是：

  1. 使用this.$set或逐个属性赋值
  2. 或者使用Object.assign创建新对象

修改后的代码：

success: res => {
    if (res.confirm) {
        // 方法1：逐个属性赋值
        Object.keys(pushtask.data).forEach(key => {
            this.$set(this.data, key, pushtask.data[key]);
        });
        
        // 方法2：使用Object.assign
        // this.data = Object.assign({}, this.data, pushtask.data);
    }
}

另外，建议将this.data改为在data()中明确定义的响应式属性，而不是直接挂在this上。例如：

data() {
    return {
        taskType: '',
        inputValue: ''
        // 其他数据属性...
    }
}

然后在赋值时直接对具体属性赋值：

this.taskType = pushtask.data.taskType;
this.inputValue = pushtask.data.inputValue;
回到顶部