将普通类型数据赋值给ref响应式数据导致报错:searchAir.vue:129 Uncaught (in promise) TypeError: Cannot set properties of,

尝试设置一个名为 'departTime' 的属性,但是这个属性的对象是undefined,因此无法设置它的值。

当时代码是这样子的:


let searchData  = ref({
departPoint:"张家界",
arrivePoint:"长沙",
departTime:"",
backTime:"",
})

//获取前一个界面传过来的值
searchData = router.currentRoute.value.query;

function departCity(city) {
searchData.value.departPoint = city;
}
function arriveCity(city) {
searchData.value.arrivePoint = city;
}

经过不停试探发现是这一句导致的错误:

searchData = router.currentRoute.value.query;

其中,router.currentRoute.value.query;是前一个界面跳转到该界面所传递的参数(query方式,参数键值对会在地址栏)

查chatgpt才恍然大悟,是因为router.currentRoute.value.query是普通类型,而我的数据searchData 本来是ref响应式数据,这样就把我的searchData 变成了普通类型;

所以我给其属性赋值时会说尝试设置一个名为 'departTime' 的属性,但是这个属性的对象是undefined,因为给响应式数据赋值是这样的:

searchData.value.backTime = time;

要点上一个value,

而我的searchData早就被转化成了普通类型,就没有value这个属性,所以导致的报错

修改:

改成一个一个赋值就行了

//获取前一个界面传过来的值
searchData.value.departPoint = airData.departPoint
searchData.value.arrivePoint = airData.arrivePoint
searchData.value.departTime = airData.departTime
searchData.value.backTime= airData.backTime

总结:

导致报错的代码是searchData = router.currentRoute.value.query;

这行代码是我突发奇想写的,自以为能把里面的值都赋过来,却没想到连类型都被改了

归根结底是语法不熟练

遇到类似的情况不要自己创造语法,而是去查资料,找规范

你可能感兴趣的:(前端)