美食网站主页怎么做,教育门户网站源码,投资建设一个网站多少钱,外贸获客概览#xff1a;处理后端返回的数据data#xff0c;写法#xff1a;data?.name。解决vue框架编译出现的报错Cannot read property name of undefined。出现问题的原因#xff1a;这是因为我们试图访问对象中不在的 key 为 name 的属性#xff0c;那么怎么解决呢#xff…概览处理后端返回的数据data写法data?.name。解决vue框架编译出现的报错Cannot read property name of undefined。出现问题的原因这是因为我们试图访问对象中不在的 key 为 name 的属性那么怎么解决呢 若是当前对象不存在某个属性key在vue中可以使用后缀修饰符常用的是?和!。
代码举例 const resData res.data.data || []const params1 reactive({shyx: resData?.age?.shyx,shzwh: resData?.age?.shzwh,whys: resData?.age?.whys,})const params2 resData.area?.map((item) {return {name: item.name,value: item.num}})const params3 reactive({partymember: resData?.partyMember?.partymember,other: resData?.partyMember?.other,})
vue3中两种后缀运算符 在Vue 3中有两个后缀运算符?和!分别表示可选属性和非空断言。 ?可选属性表示该属性是可选的如果该属性不存在不会引发错误。 !非空断言表示该属性一定存在如果该属性不存在则会引发错误。 ?后缀运算符
示例代码
const message { text: Hello World }
const greeting message.text?.toUpperCase() // greeting HELLO WORLD
const emptyMessage {}
const emptyGreeting emptyMessage.text?.toUpperCase() // emptyGreeting undefined结果分析 在上面的代码中当message对象存在text属性时可以将text属性的值转换为大写字母。而当emptyMessage对象不存在text属性时使用?.运算符访问text属性不会引发错误返回值为undefined。 !后缀运算符
实例代码
const message { text: Hello World }
const greeting message.text!.toUpperCase() // greeting HELLO WORLD
const emptyMessage {}
const emptyGreeting emptyMessage.text!.toUpperCase() // TypeError结果分析 在上面的代码中当message对象存在text属性时可以将text属性的值转换为大写字母。而当emptyMessage对象不存在text属性时使用!运算符访问text属性会引发错误因为该属性不存在。
