Question

我已经包装了应该在模板标签中有条件地显示的代码片段，但它仍然试图读取name属性，即使它不存在。

尝试找到一种方法，仅在模板上显示名称字段时才显示。

<template v-if='api && api.info.contact.name'>
    <strong>Developer:</strong> {{api.info.contact.name || api._meta.github_username }}<br>
</template>

甚至尝试通过添加OR语句来显示用户名，但都失败了。

帮助？

Answer 1

您可以创建在未定义属性时将返回空对象{}的代理。像TypeScript中的Elvis opertor。

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); // --> {}

Answer 2

<template v-if='api && api.info.hasOwnProperty("name")'>
    <strong>Developer:</strong> {{api.info.contact.name || api._meta.github_username }}<br>
</template>

hasOwnProperty最终工作

VueJS无法读取未定义导致UI错误的属性“名称”

2 个答案: