【DataV】DataV组件库——更新数据视图不更新

本文主要是介绍【DataV】DataV组件库——更新数据视图不更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考文章：dataV组件库——改变数据视图不主动刷新

问题： 拿到后端数值就直接赋值了，但是视图（页面）没有更新。

解决： 官方文档介绍dataV里面的组件props均未设置deep监听，刷新props时，要直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { …this.someProps }。

DataV官方文档

代码：

<template><div class="update-demo"><dv-percent-pond :config="config" style="width:200px;height:100px;" /></div>
</template><script>
export default {name: 'UpdateDemo',data () {return {config: {value: 66,lineDash: [10, 2]}}},methods: {// 更新数据的示例方法updateHandler () {const { config } = this/*** 只是这样做是无效* config指向的内存地址没有发生变化* 组件无法侦知数据变化*/this.config.value = 90this.config.lineDash = [10, 4]/*** 使用ES6拓展运算符生成新的props对象* 组件侦知数据变化 自动刷新状态*/this.config = { ...this.config }}}
}
</script>

这篇关于【DataV】DataV组件库——更新数据视图不更新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---