использовать API на странице Quasar

Я создаю страницу для приложения с Quasar Framework, как мне использовать этот API на странице Quasar (шаблон)? Не могли бы вы помочь мне сделать v-for на картах? Как бы вы получили (название статьи) этого объекта. 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>

javascript vuejs2 quasar-framework
person josecarlos    schedule 04.06.2019    source источник
comment
ок, я поменял апи и оставил пример, у которого на сайте новый апи   -  person josecarlos    schedule 04.06.2019
comment
Публикация вашего API-ключа — не лучший подход. Остерегаться.   -  person m1k1o    schedule 04.06.2019
comment
Я перешёл с апи, это пример сайта newsapi.org/ У меня похоже   -  person josecarlos    schedule 04.06.2019

Ответы (1)


arrow_upward
1
arrow_downward

В порядке. Кажется, это проблема с тем, как вы манипулируете полученным JSON.

Легко видеть, что у вас есть массив внутри полученного объекта, который называется «статьи». И у каждого элемента есть заголовок. Итак, в основном, что вам нужно сделать, это получить эти статьи и 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

person carlosza    schedule 04.06.2019