Как получить сообщения из Ghost Blog, используя API, в проекте vue cli


Как получить сообщения из Ghost Blog, используя API, в проекте vue cli

13.11.2020 04:04:36 Просмотров 41 Источник

Я пытаюсь отобразить в своем проекте Vue cli все сообщения в Призрачном блоге с помощью API.

Пример на этой странице предназначен для проекта nuxt.

После вызова зависимостей и аутентификации с помощью блога мы просто создаем функцию для получения сообщений:

export async function getPosts() {
  return await api.posts
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Затем на странице vue:

<template>
  <ul>
    <li v-for="post in posts">{{ post.title }}</li>
  </ul>
</template>

<script>
  import { getPosts } from '../api/posts';

  export default {
    async asyncData () {
      const posts = await getPosts();
      return { posts: posts }
    }
  }
</script>

На Nuxt это просто работает. На узле он тоже просто работает.

Я могу вызвать функцию и получить все сообщения, и это все.

Но на vue, если я попробую то же самое с функцией данных, как это:

  data: () => {
   let posts = getPosts()
   return {
    resultado: posts,
  };
}

getPosts () возвращает ожидающее обещание

Я попытался разрешить обещание с помощью функции. then () и получил результаты, но не могу передать их в возвращаемую часть данных.

  data: () => {
    let posts = getPosts()
      .then((results) => {
        return results;
      })
      .catch((err) => {
        console.error(err);
      });
    return {
      resultado: posts,
    };
  }

Как я могу сделать результаты getPosts() доступными в шаблоне?

Спасибо!

У вопроса есть решение - Посмотреть?

Ответы - Как получить сообщения из Ghost Blog, используя API, в проекте vue cli / How to get posts from Ghost Blog, using the API, on a Vue cli project

Является ответом!
Dan

13.11.2020 04:24:48

Вместо этого вызовите его в крючке жизненного цикла:

data() {
  return {
    resultado: null
  }
},
async created() {  // or async mounted()
  this.resultado = await getPosts();
}
Помочь в развитии проекта:
Закрыть X