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

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 运算符。

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 终于工作了