Vue input输入框无法输入

Vue Input 输入框无法输入 Jquery 双响绑定发布于 2021-07-17

Vue demo input 演示时，舜间憾动了Jquery在心目中的地位。Jquery笨重的监听值方式，Vue双向绑定式，高低立判。从那时候起，Vue种草了。

实践是检验真理的唯一标准。新的开发项目，Vue被公司指定唯一技术栈，是骡子是马拉出来遛遛。在编辑表格数据时，Vue双向绑定值爆露了自己身弱点：多层嵌套值下，双向绑定值失效。

场景重现：

Vuelet tmp = [];
let list = [
    {id: 1, name: '小明', sex: '男'},
    {id: 2, name: '小红', sex: '女'},
    {id: 3, name: '小王', sex: '男'},
];

for(let i in list) {
    list[i].title = '';
    tmp.push(list[i]);
}

console.log(tmp);

使用push函数重组数组，表格列表下使用input输入框修改title职位时，input输入框无法正常录入。

解决方案：

重新声明一个变量item对象，重新对item赋值，再使用push函数重组数组。

Vuefor(let i in list) {
    let item = {
        id: list[i].id,
        name: list[i].name,
        sex: list[i].sex,
        title : ''
    }
   
    tmp.push(item);
}

console.log(tmp);

除比之外，使用setTimeout定时器修改时分秒，console.log打印的值已改变，表格渲染的值不变，需要手动强制性更新值。