個人ホームページにRSSを取得して表示するようにした

ホームページは Vue.js で作ってるけど だいたいこんな感じ

<template>
  <div class="feed">
    <table>
      <tbody>
        <tr v-for="item in sortedFeedItems" :key="item.guid">
          <td>
            <p class="date">{{ item.pubDate }}</p>
            <p class="title"><a :href="item.link" target="_blank">{{ item.title }}</a></p>
          </td>
          <td> <a :href="item.feedLink" target="_blank">
              <p class="feed-title">{{ item.feedTitle }}</p>
            </a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "RSSFeed",
  data() {
    return {
      feedItems: [],
    };
  },
  components: {
  },
  computed: {
    sortedFeedItems() {
      // pubDataを基準に記事を降順にソート
      return this.feedItems.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
    },
  },
  mounted() {
    this.fetchRSSFeeds();
  },
  methods: {
    fetchRSSFeeds() {
      const requests = [
        // RSS Feed URL
      ].map(url =>
        axios.get(`https://api.rss2json.com/v1/api.json?rss_url=${url}`)
      );

      axios.all(requests)
        .then(responses => {
          responses.forEach(response => {
            const data = response.data;
            const fixedData = data.items.map(item => {
              item.feedTitle = data.feed.title;
              item.feedLink = data.feed.link;
              return item;
            });
            this.feedItems = this.feedItems.concat(fixedData);
          });
        })
        .catch(error => {
          console.error('Error fetching RSS feeds:', error);
        });
    },
  },
};
</script>

rss2jsonというAPIがあったのでこれにURLを投げてJSONにして受け取っています。