SearchResults.vue

<template>
  <div id="search-results">
    <q-card class="my-card bg-secondary text-white" v-for="s in searchResults" :key="s.id">
      <q-card-section>
        <div class="text-h6">{{s.headline.main}}</div>
        <div class="text-subtitle2">Date: {{s.pub_date | formatDate}}</div>
      </q-card-section>
      <q-card-section>
        <a :href="s.web_url" class="text-white">Link</a>
      </q-card-section>
      <q-card-section v-if="s.byline.original">{{s.byline.original}}</q-card-section>
      <q-card-section>{{s.lead_paragraph}}</q-card-section>
      <q-card-section>{{s.snippet}}</q-card-section>
    </q-card>
  </div>
</template>
<script>
export default {
  computed: {
    searchResults() {
      return this.$store.state.searchResults;
    }
  }
};
</script>
<style scoped>
.title {
  margin: 0 15px !important;
}
#search-results {
  margin: 0 auto;
  width: 95vw;
}
</style>