得推网络科技
得推网络科技
  • 发布:2018-09-10 22:07
  • 更新:2019-05-18 09:22
  • 阅读:1255

uni组件初始化只能一次问题

分类:uni-app

在做文章编辑的时候发现调用的组件,只在第一次有效。
从我的文章,点击编辑到编辑页面,再返回,点击其它文章,组件失效,组件内容还是上一篇文章的页面。
文章链接
/pages/forum/my
/pages/forum/edit?id=1
/pages/forum/edit?id=2
再vue中这类地址切换 也是不会刷新组件的 路由有问题

<upimg-box :key="'upimg'+time" :defaultImgsList="pageData.imgsdata" :defaultImgsData="pageData.data.imgsdata"></upimg-box>
2018-09-10 22:07 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

返回时数据未重置导致,data建议写成function的形式,如:

export default {  
    data() {  
        return {  
            title: 'button'  
        }  
    },  
    methods: {}  
}
得推网络科技

得推网络科技 (作者) - PHP全栈开发,需要外包可以@我

data 已经是function形式了。

<template>  
    <view>  
        <view class="upimg-box bg-fff">  
            <view class="none">  
                <input type="text" maxlength="-1" name="imgsdata" :value="imgsData" />  
            </view>  
            <view class="upimg-item" v-for="(img,imgIndex) in imgsList" :key="imgIndex">  
                <image class="upimg-img" :src="img.trueimgurl+'.100x100.jpg'"></image>  
                <view class="upimg-del" @click="delImg(imgIndex)"></view>  
            </view>  

            <view @click="upImg()" class="upimg-btn">  
                <i class="upimg-btn-icon"></i>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    var app = require("../common/common.js");   
    export default {  
        name:"upimg-box",  
        props:{  
            defaultImgsList:{},   
            defaultImgsData:{},  
        },  
        data:function(){  
            return {  
                imgsData:this.defaultImgsData,  
                imgsList:this.defaultImgsList,  
            }  
        },  
        methods:{  
            upImg:function(){  
                var that=this;  

                uni.chooseImage({  
                    success: function (chooseImageRes) {  
                        const tempFilePaths = chooseImageRes.tempFilePaths;  
                        const len=tempFilePaths.length;  
                        for(var i=0;i<len;i++){  
                            uni.uploadFile({  
                                url: app.apiHost+'?fromapp=wxapp&m=upload&a=img&ajax=1&authcode='+app.getAuthCode(), //仅为示例,非真实的接口地址  
                                filePath: tempFilePaths[i],  
                                name: 'upimg',  
                                dataType:"json",  
                                success: function (res) {  

                                    if(!res.data.error){  
                                        var rs=JSON.parse(res.data);  

                                        var json=[{  
                                            imgurl:rs.data.imgurl,  
                                            trueimgurl:rs.data.trueimgurl  
                                        }];  
                                        that.imgsList=app.json_add(that.imgsList,json);  
                                        that.imgsData=that.imgsData+","+rs.data.imgurl;  

                                    }  
                                }  
                            });  
                        }  
                    }  
                });  
            },  
            delImg:function(index){  
                var len=this.imgsList.length;  
                var imgslist=[];  
                var imgsData="";  
                var mgs=this.imgsList;  
                for(var i in mgs){  
                    if(i!=index){  
                        imgslist.push(mgs[i]);                        
                    }  
                }  
                for(var i=0;i<imgslist.length;i++){  
                    imgsData=imgsData+","+imgslist[i].imgurl;  
                }  
                this.imgsData=imgsData;  
                this.imgsList=imgslist;  

            }  
        }  
    }  
</script>  

<style>  

</style>  
得推网络科技

得推网络科技 (作者) - PHP全栈开发,需要外包可以@我

编辑页

<template>  
    <view>  
        <view v-if="pageLoad">  
            <view class="main-body">  
                <form  @submit="formSubmit"  >  
                    <view class="none">  
                        <input type="text" name="id" :value="pageData.data.id" />  
                    </view>  
                    <view class="input-flex">  
                        <view class="input-flex-label w60">主题</view>  
                        <input type="text" name="title" :value="pageData.data.title" class="input-flex-text" />  
                    </view>  
                    <view class="input-flex">  
                        <view class="input-flex-label">选择板块</view>                            
                        <pickergroup :key="'picker'+time" placeholder="请选择" :defaultGid="pageData.data.gid" :defaultCatid="pageData.data.catid" :pickerBoxClass="catChoiceClass" :data="pageData.grouplist"></pickergroup>                         
                    </view>  

                    <view class="textarea-flex">  
                        <view class="input-flex-label flex-1">内容</view>  
                        <textarea name="content" class="h100 textarea-flex-text" :value="pageData.data.content"></textarea>  
                    </view>  
                    <upimg-box :key="'upimg'+time" :defaultImgsList="pageData.imgsdata" :defaultImgsData="pageData.data.imgsdata"></upimg-box>  
                    <button formType="submit" class="btn-row-submit">提交</button>  
                </form>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import pickergroup from "../../components/pickergroup.vue";  
    import upimgBox from "../../components/upimgbox.vue";  
    var app = require("../../common/common.js");  
    var id;  
    export default {  
        components:{  
            pickergroup,  
            upimgBox  
        },  
        data: {  
            pageLoad: false,  
            pageData: {},  
            time:Date.parse( new Date()),  
        },  
        onLoad: function (option) {  
            id = option.id;  
            this.getPage();  
        },  
        onReady: function () {  
            uni.setNavigationBarTitle({  
                title: "发布帖子",  
            })  
        },  
        methods: {  

            getPage: function () {  
                var that = this;  
                uni.request({  
                    url: app.apiHost + "?fromapp=wxapp&m=forum&ajax=1&a=add&authcode="+app.getAuthCode(),  
                    data:{  
                        id:id  
                    },  
                    success: function (data) {  
                        that.pageLoad = true;  
                        that.pageData = data.data.data;  

                    }  
                })  
            },  

            formSubmit:function(e){  
                uni.request({  
                    url:app.apiHost+"?fromapp=wxapp&m=forum&a=save&ajax=1&authcode="+app.getAuthCode(),  
                    data:e.detail.value,  
                    method:"POST",  
                    header:{  
                        "content-type":"application/x-www-form-urlencoded"  
                    },  
                    success:function(res){  
                        uni.showToast({  
                            title: res.data.message,  
                            duration: 2000  
                        });  
                        if(!res.error){  
                            uni.navigateBack({  
                                delta: 1  
                            });  
                        }  
                    }  
                })  
            }  
        },  
    }  
</script>  

<style>  

</style>  
CoffeeYu

CoffeeYu

我这里也有这个问题,情况如下:

A页面打开B页面,显示条件B1数据,然后点击back
A页面再次打开B页面,显示条件B2数据,结果还是显示条件B1的数据,点击back
A页面再次打开B页面,显示条件B2数据,这个时候就显示B2的数据

1174753212@qq.com

1174753212@qq.com - 恩恩

怎么修改初始化只执行一次的问题。求作者讲解急用

要回复问题请先登录注册