做简单网站房地产店铺首页设计过程

需求：

输入完1 时，回车 调用接口，根据接口返回过来的 amount字段，给数量 输入框赋值

问题

数量输入框的值一直不显示，console打印出来amount也是有值的，但输入框就是`不显示值`，也`无法输入`

可能原因分析

1. 响应式丢失

因为我这个输入框是在弹框中，所以每次打开弹框都做了一次清空操作

代码

init() {this.openVisible = true;this.form = {};this.tabledata = [];this.$nextTick(() => {this.$refs.boxIdInput.focus();});},

所以猜测是在 init()的时候 有 this.form = {} 这样的赋值，这会导致 form 变成新的对象，
Vue 的响应式丢失，后续对 form.num 的赋值不会自动更新到视图。

2. 输入框 v-model 绑定失效

如果 form 不是响应式对象，v-model="form.num" 就不会自动更新。

解决方法

1. 初始化 form 时，始终保证包含所有字段
不要直接 this.form = {}，而是这样写：
下、

this.form = {num: '',scanCode: '',boxId: '',boxName: '',reelType: ''
};

修改后代码

init() {this.openVisible = true;this.form = {num: '',scanCode: '',boxId: '',boxName: '',reelType: ''};this.tabledata = [];this.$nextTick(() => {this.$refs.boxIdInput.focus();});},

结论

现在的问题就是因为 this.form = {} 破坏了响应式，导致后续赋值视图不更新。
只要保证 form 对象结构不变，form.num 赋值后输入框就会自动更新。

做一下记录，哎 因为这个问题 排查了好久，才发现原来是这个小知识点卡住啦