v-model 在 select 多选时返回数组，因浏览器原生 multiple 行为如此；绑定变量须初始化为数组，后端需字符串时应在提交前 join 处理。
为什么 v-model 在 select 多选时返回数组而不是字符串
因为浏览器原生 <select multiple></select> 提交的就是数组，Vue 的 v-model 会忠实映射这一行为。如果你绑定的变量是字符串，Vue 不会自动转成数组——它直接报错或静默失效。
实操建议：
- 确保绑定的变量初始值是数组，比如
selectedOptions: []，而不是selectedOptions: '' - 如果后端只接受逗号分隔字符串，别在模板里硬转，应在提交前处理：
formData.tags = this.selectedOptions.join(',') - 注意
v-model对<input type="checkbox">同样返回数组，逻辑一致
表单控件值为空时，v-model 为什么没更新 data
常见于用户清空输入框后仍显示旧值，本质是 DOM 值变了但 Vue 实例没响应。多数情况不是数据绑定失效，而是你用了 value 属性 + @input 手动同步，却忘了清空逻辑。
实操建议：
- 优先用
v-model，不要混用value和事件监听——二者冲突会导致响应丢失 - 如果必须手动控制（比如带格式化），确保赋值语句执行：例如
this.form.phone = ''而不是只改 input 的value - 检查是否对 input 做了防抖但没清空定时器，导致最后一次输入被延迟覆盖
从 API 加载数据后，表单没自动填充
异步请求返回数据后，v-model 绑定的字段没刷新，通常是因为响应式对象没正确初始化，或者数据结构不匹配。
实操建议：
- 初始化 data 时，字段必须存在。比如后端返回
{ name: 'Alice', email: 'a@b.c' }，但你在 data 中只写了form: {}，那v-model="form.name"就不会响应 - 推荐写法：
form: { name: '', email: '' }或用Object.assign({}, apiData)替换整个对象 - 避免直接
this.form = apiData后再增删字段——新增属性不会被 Vue 自动代理，要用Vue.set或重构初始结构
使用 v-model.lazy 时，回车/失焦才更新，但按钮点击没触发验证
v-model.lazy 把更新时机从 input 改为 change，而某些按钮点击（尤其 type="button"）不会触发 change 事件，导致验证时拿到的是旧值。
实操建议：
- 验证逻辑不要依赖“用户是否已失焦”，而应在提交时主动读取
this.form当前值 - 如果需要实时校验，去掉
.lazy；如果为性能考虑要延迟，可在按钮 handler 里手动调用this.$nextTick()确保 DOM 更新完成 - 注意
textarea和input[type="number"]的change触发条件不同——前者需失焦，后者还需值真正变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
