VUE重复修改属性值页面无法及时渲染问题
2018-09-04 19:20
821 查看
最近在做VUE项目时遇到一个坑。a方法修改某一属性的值后,调用b方法,b方法里面修改同一属性,虽然该属性的值已发生变化,但是一直无法及时渲染到页面上
例如:
data(){ return { i:0 } },
js方法:
a(){ var that=this; that.i=1; that.b(); }, b(){ var that=this; var i=2; that.i=i; console.log(that.i) }
虽然最后输出的i是2,但是页面上渲染的经常是1;后来通过查资料发现可以通过set方法来解决这个问题js如下
that.$set(that,'i',i);
当数据层次不多时这样做是可以实现实时渲染;但当数据层级比较多的时候需要手动调用rander函数进行自动更新,如下:
that.$forceUpdate(); that.$set(that,'i',i)阅读更多
相关文章推荐
- vue修改对象的属性值后页面不重新渲染
- vue 数组内对象修改属性页面不渲染问题
- 解决IDEA开发JavaWeb项目修改了HTML或Servlet/JSP后刷新浏览器无法及时显示修改后的页面的问题
- 解决Vue 通过下表修改数组,页面不渲染的问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- vue修改对象的属性值后页面不重新渲染的实例
- Vue 通过下表修改数组,页面不渲染问题
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- 解决修改css文件或js文件后浏览器无法及时更新的问题方法
- vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'
- 解决vue数组中对象属性变化页面不渲染问题
- android webview 加载重定向页面时点击无法回退,导致重复加载当前页面问题的解决方案
- 页面无法按照样式表进行渲染的诡异问题
- Vue路由History mode模式中页面无法渲染的原因及解决
- 详解Vue路由History mode模式中页面无法渲染的原因及解决
- vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
- vue-cli 更改数组中的数据,页面dom及时渲染 Vue.set方法
- 升级win10后 MarkdownPad 2 无法实时渲染HTML页面问题
- 关于使用JFinal构建maven项目时,使用jetty启动项目,无法渲染jsp页面的问题