потреблять Api на странице Quasar - PullRequest
Новая
       14

потреблять Api на странице Quasar

2 голосов
/ 04 июня 2019

Я создаю страницу для приложения с помощью Quasar Framework. Как использовать этот API-интерфейс на странице Quasar (шаблон)?Не могли бы вы помочь мне сделать v-for на картах?Как бы вы получили (название статьи) этого объекта.Квазар версия 1.0, плагин axios.

HTML: 

<div class="" v-for="(articles, index) in posts" :key="index">

                  {{ articles.title }}
          </div>

        <script>
        export default {
          name: 'Novidades',
          data () {
            return {
              posts: []
            }
          },
          mounted () {
            this.getPosts()
          },
          methods: {
            getPosts () {
                this.$axios.get('https://newsapi.org/v2/everything?q=bitcoin&from=2019-05-04&sortBy=publishedAt&apiKey=4feb77b8660e4904a51ecbcae805ce03')
                .then((resp) => {
                  this.posts = resp.data
                })
                .catch((err) => {
                  console.error(err)
                })
              }
            }
           }
           </script>

1 Ответ

1 голос
/ 04 июня 2019

Хорошо. Похоже, проблема в том, как вы управляете JSON, который вы получили.

Легко видеть, что у вас есть массив внутри полученного объекта, который называется "article". И у каждого элемента есть заголовок. Так что, в основном, вам нужно получить эти статьи и v-for внутри.

Код может быть как 

<template>
  <div>
    <div v-for="(article, index) in articles" :key="index">{{ article.title }}</div>
  </div>
</template>
<script>
export default {
  name: "Novidades",
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    this.getArticles();
  },
  methods: {
    getArticles() {
      this.$http
        .get(
          "https://newsapi.org/v2/everything?q=bitcoin&from=2019-05-04&sortBy=publishedAt&apiKey=4feb77b8660e4904a51ecbcae805ce03"
        )
        .then(resp => {
          this.articles = resp.data.articles;
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>

И здесь работает код: https://codesandbox.io/s/vue-template-wf6tr

...