首页 > 编程知识 正文

vue项目热更新失效,vue数组赋值无法更新页面

时间:2023-05-06 14:40:54 阅读:16896 作者:789

项目场景:

Vuex定义了一个列表,希望组件读取并显示列表数据。 其中,选择按钮的检查是否决定对象的check属性

问题说明:在组件中动态绑定class,使用计算属性返回true或flase,添加单击事件,然后单击div反转与Vuex对应的布尔值。

但是,实际动作仅在首次加载页面时正常显示,之后无法正常切换,即使在点击事件中打印CartList[index].check,也可以正常切换true、flase

然后,在使计算属性依赖于data时单击可正常切换,搜索显示计算属性依赖于data属性中的数据而存在。 只有在data数据发生变化时,才发现computed数据发生变化的视图为div : class=' { ' check ' : is check (index ) } ' @ click=' click (index ) )={ return this.$ store.state.cart list [ index ].check },methods3360{click(index ) this.$store.commit 打印dCartList发现check属性也正常切换,在methods中主动调用computed也无效。 可以成功更改数据,但页面不会刷新,只有在编辑器中对代码进行了更改并导致热更新时才能正常显示

脚本数据() return ) DC artlist : this.$ store.state.cart list,},computed:(ischeck () return ) index=)

因此,最后使用Object.assign ) )返回了新对象。 执行后,仍然无效。

4 .添加断点后,当数据发生变化时,computed并未暂停。 这太荒谬了。 可以直接在defineProperty中添加get和set,以便成功打印在单击事件触发器时被修改和读取的内容。 已经读取了修改后的值,为什么class不能绑定,必须通过热更新进行绑定

已读取object.defineproperty(cartlist,' check ',{ get: function ) ) { console.log );set:function(y ) ({ console.log ) ) '已修复); }; ); 5 .最后添加了计算属性ab。 在template中调用了{ab}。 一切都正常了。 单击后的页面可以正常更改,但如果删除ab这个不知道有什么用的属性,它又会返回到旧问题

scriptdata((return ) AAA:true,DC artlist : this.$ store.state.cart list,},props: ) cartlist3360 ) cart computed : { is check (} { return (index )={ return this.DC artlist [ index ].check },ab ) {returnthis}

其实可以用别的方法来完成这个功能,可以将点击了检查的功能从组件中分离出来,避免了通过在遍历过程中传递check属性来取值的问题

或者,也可以创建一个在data中存储所有检查的列表,然后直接修改该列表

但是,遇到不再振作的问题,不明白真的很痛苦

原因分析:

计算属性依赖于data属性中的数据而存在,只有当data依赖项中的数据发生变化时,computed数据才会发生变化并更新视图

geter和seter不会添加到新添加的属性中,而是使用Object.assign )添加属性以复盖原始对象

解决方案: Object.assign ) )添加属性以复盖原始对象。 如果无效,请停止并重新启动项目

(但我仍然不知道,为什么调用其他无关的计算属性就可以执行。)

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。