VueJS не может прочитать свойство 'имя' из неопределенного, вызывая ошибку пользовательского интерфейса

Question

Я завернул фрагмент кода, который должен быть отображен условно в теге шаблона, но он продолжает пытаться прочитать свойство name, даже если его нет.

Пытается найти способ отображения поля именив шаблоне только при его наличии.

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

даже пытался отобразить имя пользователя, добавив оператор OR, но все не удалось.

help?

Answer 1

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

hasOwnProperty наконец заработал

Answer 2

Вы можете создать Proxy, который будет возвращать пустой объект {}, когда свойство не определено.Что-то вроде оператора Элвиса в 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); // --> {}