首页/ 填坑/ 文章详情

Vue input输入框无法输入

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打印的值已改变,表格渲染的值不变,需要手动强制性更新值。

Vuethis.$forceUpdate()

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!