当前位置: 首页 > 未分类>阅读正文

vue2x在for中绑定的数据不更新

2022.8.6 朱丰华 294 次 留下评论 924字

已知绑定一个json对象 { uk : dir , uk2 : dir2}

在视图修改 dir 时,data 中的数据仍然是原数据,并没有跟着改变。

错误代码如下:

<div class="row" v-for="(bindDir, bindUk) in bindDb">
    <div class="col-xs-4">
        <input placeholder="账户" class="form-control" type="text" v-model="bindUk" readonly>
    </div>
    <div class="col-xs-4">
        <input placeholder="db文件名" class="form-control" type="text" v-model="bindDir">
    </div>
    <div class="col-xs-4">
        <button class="btn btn-primary">导入数据</button>
    </div>
</div>

这里的 bindDir 修改后,bindDb 对象没有改变。

考虑到数据的引用问题,只需要把 bindDir 改为 bindDb[bindUk] 就可以了, 修改后的代码如下:

<div class="row" v-for="(bindDir, bindUk) in bindDb">
    <div class="col-xs-4">
        <input placeholder="账户" class="form-control" type="text" v-model="bindUk" readonly>
    </div>
    <div class="col-xs-4">
        <input placeholder="db文件名" class="form-control" type="text" v-model="bindDb[bindUk]">
    </div>
    <div class="col-xs-4">
        <button class="btn btn-primary">导入数据</button>
    </div>
</div>

一些相关说法:

具体原因是因为Vue2中发布订阅模式使用的是Object.defineProperty()方法来监听数据的改变,

而这个方法的缺陷就是无法监听数据变动,在Vue3中已经用Proxy代替改方法,并解决该问题

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注