Using computed in uni app solves the abnormal display of data () value in tab switching

tab After switching, the data display is abnormal

The data structure returned by the back end =>

{
“status”:1,
“msg”:“ The query is successful ”,
“data”:{
“no_start_work_count”:1,
“working_count”:0,
“in_working_count”:0,
“work_end_count”:0,
“work_over_dd_count”:0,
“work_over_count”:0,
“count”:1,
“pageCount”:1,
“nowPage”:“1”,
“list”:[
{
“id”:137,
“work_sn”:“gd16562977xxx8”,
“user_id”:6718xx,
“type”:2,
“address”:“ Guangdong province, guangzhou XXX XXX”,
“phone_mob”:“13488888888”,
“consignee”:“wwater”,
“image_url”:“”,
“remark”:“ Looking forward to the door-to-door time ：2022-06-27 10:41-10:38;<br/> Work order requirements ： This is whether the test time can be checked ”,
“add_time”:“2022-06-27 10:42”,
“visit_time”:“2022-06-27 10:41”,
“order_id”:194956xxx,
“order_sn”:“20220627104xxxxxx”,
“recs_id”:“4443xxx”,
“status”:2,
“worker_profit_money”:“0.00”,
“items_that”:“ Wall mounted ”,
“punch”:1,
“fault_num”:1,
“fault_type”:2,
“fault_money”:“10.00”,
“orderGoods”:{
“goodsList”:[
{
“goods_name”:“ Washing machine installation ”,
“goods_image”:“https://oss.aliyuncs.com/tpsite2/zuolinyouli.xyd.qushiyun.com/8af4ccf9ccb7554c0af684de201faf66.png”,
“price”:“0.01”,
“quantity”:“1.00”
}
],
“orderPrice”:“0.01”
},
“lng”:null,
“lat”:null,
“distance”:0,
“status_text”:“ Dispatched ”,
“user_avatar”:“https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqZ4vmXhgRLao1iamtR114XPyADIF9UV9nEibndUudcPiaFVQlibibn6rd4HJ06zH3THmvEC6I3dNSZvdA/132”
}
]
}
}

BUG View and analysis

adopt axios The obtained data will be rendered and bound later , My side

Code =>

adopt map Traverse the loop and return the product name and quantity , However, the above situation will occur in the switching process goodsQuantity``goodsName Turn into object object .

What the label shows

	<view class="left text_overflow padding20">{
   {goodsName}}x{
   {goodsQuantity}}</view>

	data() {
    
		return {
    
			goodsName:"",
			goodsQuantity:0,
			orderList:[],
		}
	},
	methods:{
    
		 getDetail() {
    
                let that = this
                let url =  Address interface 
                let datakey = []
                // ......datakey Parameters to be passed 
                // datakey['limit'] = 10
                Util.request(url, datakey, "GET", res => {
    
                    // .......
                    let orderList = res.data.list
                    this.orderList = [...this.orderList, ...orderList];
                    this.status = 'loadmore'
					//  Here is the assignment operation 
					that.goodsName = orderList.orderGoods.goodsList.map(item =>{
    
                        return item.goods_name
                    })
                    that.goodsQuantity = orderList.orderGoods.goodsList.map(item =>{
    
                        return item.quantity
                    })
                    if (orderList.length < 10) {
    
                        this.switch = true
                        this.status = 'nomore'
                    }
                }, err => {
    
                    console.error(err)
                })
            },
	}

resolvent

By calculating properties computed To solve this problem ：

difference data and computed

data and computed The core difference is data The properties in do not change with the change of the assigned variable , and computed Meeting .（ Assignment variables are similar ：num: aaa.bbb, The direct assignment is num: 123）; That is, if our value is variable , Then use this computed To use ,computed You can more finely control attribute reading and writing , But it needs a temporary variable (temp_name) Can achieve .

<view class="left text_overflow padding20">{
   {shopGoodsName }}x{
   {shopGoodsQuantity}}</view>

	data() {
    
		return {
    
			goodsName:"",
			goodsQuantity:0,
			orderList:[],
		}
	},
	 computed:{
    
            shopGoodsName() {
    
               return this.goodsName = this.orderList.map(val =>{
    
                 return val.orderGoods.goodsList.map(item =>{
    
                        return item.goods_name
                    })
                })
            },
            shopGoodsQuantity() {
    
                return  this.goodsQuantity = this.orderList.map(val =>{
    
                    return val.orderGoods.goodsList.map(item =>{
    
                        return parseInt(item.quantity)
                    })
                })
            }
        },
	methods:{
    
		 getDetail() {
    
                let that = this
                let url =  Address interface 
                let datakey = []
                // ......datakey Parameters to be passed 
                // datakey['limit'] = 10
                Util.request(url, datakey, "GET", res => {
    
                    // .......
                    let orderList = res.data.list
                    this.orderList = [...this.orderList, ...orderList];
                    this.status = 'loadmore'
                    if (orderList.length < 10) {
    
                        this.switch = true
                        this.status = 'nomore'
                    }
                }, err => {
    
                    console.error(err)
                })
            },
	}

It finally solved the problem