Vue+Element关于数据在数组进行回显，并进行修改数组当前的数量

Posted 2023-02-08 小hu同学

前言：
需求是点击新增，出现物资信息填写框，每点击新增就增加1行物资信息填写
名称是，是做的模糊搜索，点击搜索出来的物资，将当前的信息回显到当前的一行，并且进行数据的修改

浅浅的画个草图看的更加的清晰

说明：在按钮1页面的操作是将商品购买进库，点击按钮保存，按钮2页面的操作是将刚刚采购进来的商品进行库存的变更，商品的信息不能做修改，只能修改数量

说一下我遇到的问题吧，我在按钮2页面，当我模糊搜索点击后，后端返回给我的值是 b,但是我绑定的是a,后端需要的也是a,这个时候我就要将b赋值给a,去修改a,然后保存将a传给后端

1、第一种（直接赋值）

 //我首先是用到的 直接赋值的方法，这个时候input可以显示值，但是不能做修改
 //我列表数据结构为[,,];每一条信息一个对象
 item.a = item.b

2、第二种（set）数据响应式

//我网上查了一下，说vue可以使用set这个将数据变为响应式来更新，这种方法也确实可以，具体的可以自行查查
//我看了一下 我的那个a,确实没有这个set/get
// 这句话的意思是 在item这个对象里面 添加一个变量 a,值为b的值
Vue.set(item,'a',b);

注意： set用的时候得慎用，因为这个set用了后，我在点击查看的时候，数据不会回显了，此处定义的a和使用set后的a,显然并不是同一个了

3、解决办法

//我这里的话 最后解决办法就是 在输入框的两边，定义了两个点击事件，通过按钮来控制，当然了这个办法有点low
//但是能用吧
//这里的item 是将数组循环了定义的，没有贴完全部代码
 <el-input
       class="inputNum"
        v-model="item.a"
        min="0"
        placeholder="请输入数量" 
        onkeyup="this.value=this.value.replace(/\\D|^0/g,'')">
     <i slot="suffix" class="el-input__icon el-icon-plus"  @click="add(index)"></i>
     <i slot="prefix" class="el-input__icon el-icon-minus" @click="reduce(index)"></i>
    </el-input>

   // 数量+1
            add(index)
            //获取最大的值
                this.maxInventoryQuantity = this.formData.supplyExchangeList[index].b;
			//判断当点击+1的时候输入框的值跟后端返回的值是否相等，相等则不允许在加，弹出提示框 
                if (this.formData.supplyExchangeList[index].a== this.maxInventoryQuantity) 
                    this.maxState[index] = 1;
                    return this.alert('已到最大数量');
                    
                else
                //否则就+1
                    this.formData.supplyExchangeList[index].a+=1;
                  //强制更新
                    this.$forceUpdate()
                
                
            ,
     // 数量-1
            reduce(index)
                this.maxState = null;
                //是否==0,等于 弹出提示框
                if(this.formData.supplyExchangeList[index].a==0) return this.alert('已到最小数量');
                 this.formData.supplyExchangeList[index].a-=1;
                 this.$forceUpdate()
            ,

我这种只能算很low的解决办法吧，有更好的办法可以评论区讨论讨论