vue3的reactive赋值问题解决,
3672Js.Com2024-04-11 02:22 来源:未知 阅读:13793 关注度3
vue3的reactive赋值问题解决,
目录
- 问题
- 筛选表单重置功能
- 弹窗数据回显
- 解决方案
- 补充
问题
vue3中直接对reactive声明的变量本身进行赋值是无效的。
筛选表单重置功能
// 数据结构 let filterForm = reactive({ createDate: null, q: null })
起初我的做法是直接给filterForm变量赋值。
function reset() { filterForm = { createDate: null, q: null } }
写完之后发现无效,便改成了单个数据置空,此时生效了。
function reset() { filterForm.createDate = null filterForm.q = null }
弹窗数据回显
const props = defineProps({ visible: { type: Boolean, default: false }, data: { type: Object, default: {} } }) let visible = ref(false) let modalData = reactive({})
我的逻辑:监听visible变量,如果弹窗显示,则将数据回显。
我的做法是:把props.data结构赋值给modalData变量,结果没有生效,我用vue插件查看,插件显示modalData变量是一个空对象。
用console.log打印,发现数据是有值的。
watch{ () => props.visible, (val) => { if(val) { modalData = { ...props.data } } visible = val } }
查了下资料,发现直接给reactive声明的变量本身赋值是没有效果的。
于是我便给modalData里面又嵌套了一层data。
let modalData = reactive({ data: {} }) watch{ () => props.visible, (val) => { if(val) { modalData.data = { ...props.data } } visible = val } }
解决方案
单个赋值
let formData = reactive({ updateDate: null }) formData.updateDate = '2023-7-10' function reset() { formData.updateDate = null }
多嵌套一层
const props = defineProps({ data:{ type: Object, default: {} } }) const modalData = reactive({ data:{} }) modalData.data = { ...props.data }
补充
在查阅资源时,发现reavtive声明的数组变量,赋值时也同样有问题。
如果需要清空数组,不能直接赋值一个空数组,而是要将数组长度设置为 0。
let arr = reactive([]) // 错误写法 arr = [] // 正确写法 arr.length = 0
到此这篇关于vue3的reactive赋值问题解决的文章就介绍到这了,更多相关vue3 reactive赋值内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!
您可能感兴趣的文章:- Vue3中reactive变量重新赋值无法响应的3种处理方法
- vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题
- vue3使用reactive赋值后页面不改变
- vue3使用reactive包裹数组正确赋值问题
- Vue3 reactive响应式赋值页面不渲染的解决
- vue3中reactive数据被重新赋值后无法双向绑定的解决
- vue3中reactive不能直接赋值的解决方案
- 关于vue3中的reactive赋值问题
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭