Как избежать проверки объекта в объекте на наличие в данных Vue. js?

Question

<template>
        <img :src="user.avatar_thumbnail">
        <a :href="user.profile.link"/>
    </template>
    <script>
        export default {
            data: function () {
                user: {}
            },
            mounted: function() {
                let vm = this;
                axios.get('user/profile/<id>').then((response) => {
                    vm.user = response.data.user
                });
            }
        }

    </script>

если сервер не отправляет поле 'avatar_thumbnail' в объекте пользователя, поэтому страница не отображается,

, поэтому я могу использовать выражение if else (троичное), но я не могу сделать это везде

    <img :src="user.avatar_thumbnail ? user.avatar_thumbnail : '' ">

может есть vuejs какой-нибудь инструмент для этой ситуации?

и более сервер отправляет подобные объекты (вложенные): user.profile.avatar_thumbnail и я не хочу делать вложенные троичное выражение (пожалуйста, не рекомендуйте мне использовать вычисляемые методы - я буду использовать это, если не смогу найти другое решение)

Answer 1

Существует много разных способов решения ваших проблем. Но в вашем данном коде много ошибок. Вы можете попробовать это решение

 <template>
  <div>
    <img :src="getThumbnail()" />
    <a :href="user.profile.link" />
  </div>
</template>
        <script>
export default {
  data: function() {
    return{
    user: {}
    }
  },
  methods: {
    getThumbnail() {
      if (this.user.avatar_thumbnail) {
        return this.user.avatar_thumbnail
      } else {
        return 'default_thumbnil'
      }
    }
  },
  mounted: function() {
    let vm = this
    axios.get('user/profile/<id>').then(response => {
      vm.user = response.data.user
    })
  }
}
</script>

Answer 2

Оказывается, это довольно просто, просто установите значение по умолчанию для объекта с той же структурой, что и для объекта, который вы собираетесь получить. Например:

data: function () {
  user: {
    avatar_thumbnail: '',
    profile: {
      link: ''
    }
  }
}

Вы также можете определить функцию, которая возвращает данные initial, например:

const initialUser = () => {
  return {
    avatar_thumbnail: '',
    profile: {
      link: ''
    }
  }
}

Затем используйте ее в свойстве данных:

data: function () {
  user: initialUser()
}

Примечание. Вам может потребоваться указать только свойства объекта, которые используются в шаблоне для преодоления потенциальных ошибок.

Answer 3

 <img :src="user.avatar_thumbnail || '' ">

или:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

и, правильно

  export default {
            data: function () {
                return { 
                   user: {}
               }
            },