Вычисляемое свойство не возвращает асинхронные данные

Question

Я пытаюсь изучить Storyblok для нового проекта, которым занимаюсь. Я очень не понимаю, как получить доступ к данным и почему они не работают.

У меня есть проект Vue.js, который я успешно связал с storyblok, и я даже могу увидеть правильный JSON для конкретной страницы, которую я просматриваю, в моем отладчике Vue.

Вот оно возвращается this.story:

{
   ...
   "content":{
      "_uid":"###",
      "body":[
         {
            "_uid":"###",
            "component":"Header And Content",
            "headline_h1":"Test headline copy",
            "page_content":{
               "type":"doc",
               "content":[
                  {
                     "type":"paragraph",
                     "content":[
                        {
                           "text":"Headline text",
                           "type":"text"
                        }
                     ]
                  }
               ]
            }
         },
         {
            "_uid":"###",
            "logo":{
               "id":null,
               "alt":null,
               "name":"",
               "focus":null,
               "title":null,
               "filename":null,
               "copyright":null,
               "fieldtype":"asset"
            },
            "component":"Cross-Site Info",
            "insta_link":"",
            "site_title":"Site Title",
            "footer_logo":{
               "id":null,
               "alt":null,
               "name":"",
               "focus":null,
               "title":null,
               "filename":null,
               "copyright":null,
               "fieldtype":"asset"
            },
            "twitter_link":"",
            "youtube_link":"",
            "donation_link":"",
            "facebook_link":"https://www.facebook.com/",
            "mailchimp_link":"",
            "site_description":"Site desc"
         }
      ],
      "component":"page"
   },
   ...
}

Вот в чем проблема:

• this.story возвращает правильный JSON
• this.story.content возвращает правильный JSON
• this.story.content.bodyне работает! Даже если я попытаюсь дождаться его загрузки, если это проблема с асинхронностью

Раньше я решал асинхронные проблемы, создавая вычисляемое свойство следующим образом:

header () {
  return this.story.content.body && this.story.content.body
}

Но в данном случае это не работает.

У кого-нибудь есть предложения?

Похоже, это должно работать, и даже в документации Storyblok говорится, что нужно посмотреть this.story.content.body заблокировать ваш контент, но я не могу до него добраться!

ОБНОВИТЬ:

Итак, он работает, но я не совсем уверен, почему он работает! Кто-нибудь может объяснить?

Когда он у меня есть в вычисляемом свойстве, он не работает, но когда он у меня прямо в фигурной скобке в HTML, он работает!

Например: <h1>{{ story.content.body[0].title }}</h1> действительно работает, но наличие его в вычисляемой опоре, как указано выше, не работает.

Answer 1

Очень вероятно, что ошибка связана с тем, что данные недоступны при первой попытке их использования.

Вы можете отрендерить деталь условно, поэтому, если у вас есть что-то вроде этого <h1>{{ story.content.body[0].title }}</h1>, это вызовет ошибки, если он не находится внутри элемента с v-if="story" Или что-то в этом роде.

Проблема с его наличием в вашем computedзаключается в том, что он пытается кэшировать значение при первом запуске. Итак, этот код...

header () {
  return this.story.content.body && this.story.content.body
}

выполняется до загрузки данных.

Есть несколько способов справиться с этим, но самый простой - вернуть null при улове.

header () {
  try {
    return this.story.content.body
  } catch (error) {
    return false
  }
}

И в своем шаблоне вы можете затем использовать v-if="header"

Поскольку это вычисляемая (предположительно реактивная переменная, в противном случае она может не работать), после загрузки данных она обновит и повторно отобразит компонент с данными.