vue中数组不具有响应式,需要使用vue.$set()

1.在掉完接口后在数组中的每一项添加三个属性

orderStatus(id){
    
    
				this.api.orderListStatus ({
    
    order_id:id}).then(res=>{
    
    
					this.datalist = res.order_detail
					this.goods_info = res.order_detail.goods_detail
					res.order_detail.goods_detail.map(item=>{
    
    
						item['comment']=''
						item['imgList']=[]
						item['remnant'] =0
					
					})
					console.log(this.goods_info)
					}).catch(err=>{
    
    
									 
					})
			},

2.通过上传输入改变属性的属性值
若是直接改变remnant的值,页面并没有渲染,这里就是需要用到$.set(),改变数组的值,是不具有响应式的,或者也可以重新赋值,赋值到一个空数组上

	// 输入框字数
			descInput(e,index){
    
    
				// this.remnant=12
				this.goods_info.map((item,cindex)=>{
    
    
					if(index==cindex){
    
    
						item.remnant=e.detail.value.length
						this.$set(this.goods_info,index,item)
					}
					
				})

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45894929/article/details/110821706