uni-app中使用computed解决了tab切换中data()值显示的异常

tab切换以后数据展示异常

后端返回的数据结构=>

{
“status”:1,
“msg”:“查询成功”,
“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”:“广东省 广州市 XXX XXX”,
“phone_mob”:“13488888888”,
“consignee”:“wwater”,
“image_url”:“”,
“remark”:“期待上门时间：2022-06-27 10:41-10:38；<br/>工单需求：这是测试时间是否可以查阅”,
“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”:“挂壁式”,
“punch”:1,
“fault_num”:1,
“fault_type”:2,
“fault_money”:“10.00”,
“orderGoods”:{
“goodsList”:[
{
“goods_name”:“洗衣机安装”,
“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”:“已派工”,
“user_avatar”:“https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqZ4vmXhgRLao1iamtR114XPyADIF9UV9nEibndUudcPiaFVQlibibn6rd4HJ06zH3THmvEC6I3dNSZvdA/132”
}
]
}
}

BUG视图和分析

通过axios获取的数据以后进行渲染绑定，我这边

代码=>

通过map遍历循环返回出去这个商品名称和数量，但是会出现上述的情况在切换过程中会出现goodsQuantity``goodsName 变为object对象。

标签显示的内容

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

	data() {
		return {
			goodsName:"",
			goodsQuantity:0,
			orderList:[],
		}
	},
	methods:{
		 getDetail() {
                let that = this
                let url = 地址接口
                let datakey = []
                // ......datakey需要传递的参数
                // datakey['limit'] = 10
                Util.request(url, datakey, "GET", res => {
                    // .......
                    let orderList = res.data.list
                    this.orderList = [...this.orderList, ...orderList];
                    this.status = 'loadmore'
					// 这边进行赋值操作
					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)
                })
            },
	}

解决方法

通过计算属性computed 来解决这个问题：

区别data和computed

data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动，而computed 会。（赋值变量类似：num: aaa.bbb,直接赋值是 num: 123）；也就是说如果我们的值是可变的，那么就是用这个computed进行使用，computed可以更精细的控制属性读写，但它需要借助一个临时变量(temp_name)才能实现。

<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 = 地址接口
                let datakey = []
                // ......datakey需要传递的参数
                // 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)
                })
            },
	}

最终解决了这个问题