el-input输入框失效问题

el-input输入框失效问题

结合我个人在搜索bug解决办法时的体验，同时充分考虑到不同阅读者编程能力的差异，特意用了一种区别于罗列大量代码来说明问题的写作方式，来阐述 “el-input输入框失效问题” 的解决方法！！！

1.bug引入

近期公司接手了一个二次开发的项目，我负责的模块正如下方所示，要求就是实现一个购物车的功能。

购物车的实现逻辑如下：

• 在商品列表区域，点击商品，拿到当前点击商品的有关属性
• 将当前点击商品的记录，加入到data中定义好的一个空数组goodsList。（该商品的记录我们用变量 item来代表，其包含goods_id、goods_price、goods_image等属性)
• 在购物车区域，我们通过el-table等组件将商品的有关属性渲染进去
• 至此，购物车添加商品和渲染商品便实现了。
• 注：本示例的商品列表区域和购物车区域在同一个页面中

问题介绍：（沉下心，仔细阅读此处的内容）

1. 用户可以手动的进行数量、长宽的调整，但是在该项目中，后台返回给我的商品数据中没有商品数量这个属性，因此就无法直接为el-input数量输入框进行数据绑定。
2. 起初我尝试在添加商品的方法中手动为当前的item项添加一个goods_num属性，再push到goodsList，而后使用goods_num和el-input数量输入框进行数据绑定，就可以成功需求，但现实很残酷。
3. 数量输入框无法正常的上下调整数据（只能上下点击1下，而后便失效了），更无法实时的将数据更新到goods_num中

2.bug解决

解决方法：

// 这两行代码，是添加商品记录（item），到购物车列表数据的方法（goodsList）

// 通过$set告知组件，我为item项添加了一个新属性，属性值为 1
this.$set(item,'goods_num',1)
// push到 goodsList
this.goodsList.push(item)

至此，便成功了为 el-input 数量输入框实现了和 goods_num双向数据绑定（数量调整时，更新到goodsList对应的记录），并能够通过输入框自由的调整数量。