VueJS 无法读取未定义的属性 'name' 导致 UI 错误

Question

我已经将应该有条件地显示在模板标记中的代码片段包装起来，但它一直在尝试读取名称属性，即使它不存在。

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

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

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

帮忙？

Answer 1

您可以创建 Proxy，当属性未定义时，它将 return 清空对象 {}。类似于 TypeScript 中的 Elvis 运算符。

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 无法读取未定义的属性 'name' 导致 UI 错误

VueJS cannot read property 'name' of undefined causing UI error

conditional

vue.js

VueJS 无法读取未定义的 属性 'name' 导致 UI 错误

VueJS cannot read property 'name' of undefined causing UI error

conditional

vue.js

VueJS 无法读取未定义的属性 'name' 导致 UI 错误