VueJS无法读取未定义的属性“”name“”，导致UI错误
VueJS无法读取未定义的属性“”name“”，导致UI错误
提问于 2018-06-05 02:49:21
我已经将应该有条件地显示在模板标记中的代码片段包装起来，但它仍然试图读取name属性，即使它不存在。
正在尝试找到一种仅当模板上存在名称字段时才显示该字段的方法。
<template v-if='api && api.info.contact.name'>
<strong>Developer:</strong> {{api.info.contact.name || api._meta.github_username }}<br>
</template>甚至尝试通过添加OR语句来显示用户名，但都失败了。
帮助?
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 23:28:20
<template v-if='api && api.info.hasOwnProperty("name")'>
<strong>Developer:</strong> {{api.info.contact.name || api._meta.github_username }}<br>
</template>hasOwnProperty最终完成了工作
Stack Overflow用户
发布于 2018-06-05 03:28:47
您可以创建代理，当属性未定义时，它将返回空对象{}。有点像TypeScript里的猫王操纵者。
function safe(obj) {
return new Proxy(obj, {
get: function(target, name) {
const result = target[name];
if (!!result) {
return (result instanceof Object)? safe(result) : result;
}
return safe({});
}
});
}使用示例：
const jane = {
name: 'Jane',
age: 35
};
const john = {
name: 'John',
address: {
street: '7th Avenue',
city: 'Ecmaville',
zipCode: '23233'
},
sister: jane,
age: 28
};
var sjohn = safe(john);
console.log(sjohn.name); // --> "John"
console.log(sjohn.address.street); // --> "7th Avenue"
console.log(sjohn.sister.name); // --> "Jane"
console.log(sjohn.sister.address); // --> {}
console.log(sjohn.sister.address.street); // --> {}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50686987
复制相关文章
相似问题