Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量
Posted 小hu同学
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量相关的知识,希望对你有一定的参考价值。
前言:
需求是点击新增,出现物资信息填写框,每点击新增就增加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的解决办法吧,有更好的办法可以评论区讨论讨论
以上是关于Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量的主要内容,如果未能解决你的问题,请参考以下文章
Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量