全盘崩坏
全盘崩坏
  • 发布:2020-08-26 13:41
  • 更新:2022-01-18 23:20
  • 阅读:1340

【报Bug】nvue页面数据更新不会同步到页面

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.14.6

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: 6s

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>    
    <view class="content">    
        <image class="logo" src="/static/logo.png"></image>    
        <view class="text-area">    
            <text class="title">{{title}}</text>    
        </view>    
        <button class="button" type="default" @click="changeNvueData1">复现1</button>    
        <button class="button" type="default" @click="changeNvueData2">复现2</button>    
        <button class="button" type="default" @click="changeNvueData3">正常更新</button>    
    </view>    
</template>    

<script>    
    function request1(options, custom = {}) {  
        return uni.request({  
            url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz"  
        }).then(function(res) {  
            return "复现1返回";  
        });  
    }  

    function request2(options, custom = {}) {  
        return uni.request({  
            url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz"  
        }).then(function(res) {  
            return "复现2返回";  
        });  
    }  

    export default {    
        data() {    
            return {  
                pointer: "data声明",  
                title: 'Hello'    
            }    
        },  
        methods: {    
            async changeNvueData1() {    
                const title = await request1();  
                console.log(title);  
                this.title = title;  
                // 测试this指向是否正确  
                console.log(this.pointer);  
            },  
            changeNvueData2() {  
                request2().then(title => {  
                    console.log(title);  
                    this.title = title;  
                    // 测试this指向是否正确  
                    console.log(this.pointer);  
                })  
            },  
            changeNvueData3() {  
                this.title = "正常更新";  
            }  
        }    
    }    
</script>    

<style>    
    .content {    
        display: flex;    
        flex-direction: column;    
        align-items: center;    
        justify-content: center;    
    }    

    .logo {    
        height: 200rpx;    
        width: 200rpx;    
        margin-top: 200rpx;    
        margin-left: auto;    
        margin-right: auto;    
        margin-bottom: 50rpx;    
    }    

    .text-area {    
        display: flex;    
        justify-content: center;    
    }    

    .title {    
        font-size: 36rpx;    
        color: #8f8f94;    
    }    

    .button {  
        width: 100px;  
        margin-bottom: 20px;  
    }  
</style>

操作步骤:

使用复现代码测试

预期结果:

数据可以正常更新

实际结果:

数据不可以正常更新

bug描述:

在调试的时候发现对ios设备的nvue页面来说,声明在data中的数据初始渲染可以显示,但是在request中使用then链式调用时对data中数据进行更新时数据可以正常更新,但是数据不会同步到页面显示,使用之前正常的nvue页面测试,数据同样不能更新到页面显示

补充:经测试,安卓正常,ios有问题,版本13.6.1和12.4.8都有问题

2020-08-26 13:41 负责人:无 分享
已邀请:
jxtian

jxtian

这是一个nvue页面,不存在这个问题,你是这个意思吗?:

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <button type="default" @click="changeNvueData">change data</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            changeNvueData() {  
                this.title = 'get you hands dirty'  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
  • 全盘崩坏 (作者)

    进一步测试发现,问题出在request方法中,下面代码可以复现


        <view class="content">    
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
    <text class="title">{{title}}</text>
    </view>
    <button class="button" type="default" @click="changeNvueData1">复现1</button>
    <button class="button" type="default" @click="changeNvueData2">复现2</button>
    <button class="button" type="default" @click="changeNvueData3">正常更新</button>
    </view>
    </template>

    <script>
    function request1(options, custom = {}) {
    return uni.request({
    url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz"
    }).then(function(res) {
    return "复现1返回";
    });
    }

    function request2(options, custom = {}) {
    return uni.request({
    url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz"
    }).then(function(res) {
    return "复现2返回";
    });
    }

    export default {
    data() {
    return {
    pointer: "data声明",
    title: 'Hello'
    }
    },
    methods: {
    async changeNvueData1() {
    const title = await request1();
    console.log(title);
    this.title = title;
    // 测试this指向是否正确
    console.log(this.pointer);
    },
    changeNvueData2() {
    request2().then(title => {
    console.log(title);
    this.title = title;
    // 测试this指向是否正确
    console.log(this.pointer);
    })
    },
    changeNvueData3() {
    this.title = "正常更新";
    }
    }
    }
    </script>

    <style>
    .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
    }

    .text-area {
    display: flex;
    justify-content: center;
    }

    .title {
    font-size: 36rpx;
    color: #8f8f94;
    }

    .button {
    width: 100px;
    margin-bottom: 20px;
    }
    </style>

    2020-08-26 16:57

  • 全盘崩坏 (作者)

    复现确认了吗?安卓都更新版本了,ios还在等着修复,急急急

    2020-08-28 09:30

dasensen

dasensen - 刘伟森

我也出现此问题

该问题目前已经被锁定, 无法添加新回复