事情是这样发生的,我在一个已经初始渲染过的数组数据中再次添加数据,但是数据渲染不出来,并且我也不能强制刷新页面来渲染,因为新添加的数据都存放在前端中,还未保存到后端。那么我通过我如此如此 这般这般之后,发现了问题所在,并找到了解决方案~啦啦啦
首先先展示下问题代码
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) return
// 验证成功
let obj = JSON.parse(JSON.stringify(this.formItem))
this.isAddItem === '1'? this.tableData.push(obj):(this.tableData[this.editItemIndex] = obj)
})
上面代码中中,我们会发现直接在原有的数据中添加数据,会发现页面中并没有渲染那个数据的,为啥咧?
原理就在vue的深入响应式原理,除了vue文档中说的解决办法之外,我这里介绍了另外种 方便可行的小白方法。
解决思路:那么我们需要自动的,在每一次添加数据之后都能够让页面重新渲染dom结构。
解决方法:初始化一个变量 = 0,然后每次添加之后,那个变量就+1,如此来唤醒dom。
export default {
data() {
return {
// 重新渲染dom标志
afreshDomKey: 0
}
},
methods: {
// 保存新增内容
saveItem() {
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) return
// 验证成功
let obj = JSON.parse(JSON.stringify(this.formItem))
this.isAddItem === '1'? this.tableData.push(obj) : (this.tableData[this.editItemIndex] = obj)
// 更改后需要重新渲染dom结构
this.afreshDomKey += 1
})
}}
还有个解决的方法,具体看我另外一篇文章
好了,以上可能很多专业术语用的不好,欢迎大家之处,共同进步哦~