vue3的reactive赋值问题解决

2024-04-18 0 204
目录
  • 问题
  • 筛选表单重置功能
  • 弹窗数据回显
  • 解决方案
  • 补充

问题

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赋值内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Vue3中reactive变量重新赋值无法响应的3种处理方法
  • vue3reactive定义的引用类型直接赋值导致数据失去响应式问题
  • vue3使用reactive赋值后页面不改变
  • vue3使用reactive包裹数组正确赋值问题
  • Vue3reactive响应式赋值页面不渲染的解决
  • vue3中reactive数据被重新赋值后无法双向绑定的解决
  • vue3中reactive不能直接赋值的解决方案
  • 关于vue3中的reactive赋值问题

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue3的reactive赋值问题解决 https://www.u-9.cn/biancheng/javascript/186847.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务