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

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

浅浅的画个草图看的更加的清晰
Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量_第1张图片
Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量_第2张图片

Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量_第3张图片
说明:在按钮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,显然并不是同一个了

Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量_第4张图片

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的解决办法吧,有更好的办法可以评论区讨论讨论

你可能感兴趣的:(笔记,问题,Vue,vue.js,javascript,前端)