在 Quasar 页面消费 Api

Question

我正在使用 Quasar 框架为应用程序创建页面，如何在 Quasar 页面（模板）上使用此 Api？你能帮我在卡片上画一个 v-for 吗？您将如何获得此 object 的（文章标题）。 Quasar 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>

Answer 1

好的。您如何操作收到的 JSON 似乎是个问题。

很容易看出您在 object 中收到了一个名为 "articles" 的数组。每个元素都有一个标题。所以基本上你要做的是，获取这篇文章并在其中 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

在 Quasar 页面消费 Api

consume Api on the Quasar page

javascript

vuejs2

quasar-framework