home.vue

<template>
  <q-page padding>
    <div class="text-center">
      <h2>{{selectedSection | capitalize}}</h2>
      <q-btn color="primary" label="Sections">
        <q-menu>
          <q-list>
            <q-item
              clickable
              v-close-popup
              v-for="s in sections"
              :key="s"
              @click="selectSection(s)"
            >
              <q-item-section>{{s | capitalize}}</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
      <br />
    </div>
    <br />
    <q-card class="my-card bg-secondary text-white" v-for="a in articles" :key="a.id">
      <q-card-section>
        <div class="text-h6">{{a.title}}</div>
        <div class="text-subtitle2">Date: {{a.published_date | formatDate}}</div>
      </q-card-section>
      <q-card-section>
        <a :href="a.url" class="text-white">Link</a>
      </q-card-section>
      <q-card-section v-if="a.byline">{{a.byline}}</q-card-section>
      <q-card-section>{{a.abstract}}</q-card-section>
      <q-card-section>
        <img
          v-if="a.multimedia[a.multimedia.length - 1]"
          :src="a.multimedia[a.multimedia.length - 1].url"
          :alt="a.multimedia[a.multimedia.length - 1].caption"
          class="image"
        />
      </q-card-section>
    </q-card>
  </q-page>
</template>
<script>
import { nytMixin } from "../mixins/nytMixin";
export default {
  name: "home",
  mixins: [nytMixin],
  computed: {},
data() {
    return {
      selectedSection: "home",
      articles: [],
      sections: `arts, automobiles, books, business, fashion, food, health,
    home, insider, magazine, movies, national, nyregion, obituaries,
    opinion, politics, realestate, science, sports, sundayreview,
    technology, theater, tmagazine, travel, upshot, world`
        .replace(/ /g, "")
        .split(",")
    };
  },
beforeMount() {
    this.getNewsArticles(this.selectedSection);
  },
methods: {
    async getNewsArticles(section) {
      const response = await this.getArticles(section);
      this.articles = response.data.results;
    },
selectSection(section) {
      this.selectedSection = section;
      this.getNewsArticles(section);
    }
  }
};
</script>
<style scoped>
.image {
  width: 100%;
}
.title {
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 15px !important;
}
.md-card {
  width: 95vw;
  margin: 0 auto;
}
</style>