Отображение RSS-канала на передней части

Question

Я хочу отобразить серию статей из этого RSS-канала оповещения Google (https://www.google.ie/alerts/feeds/10663948362751557705/4511034072220974544) в моем приложении Vue. js.

Я создал компонент «Feed. vue» и wi sh для отображения канала в «App. vue». Мой бэкэнд - Express. js. Во-первых, я даже делаю это правильно? У меня это работает в Javascript, но я хочу использовать Vue. js в качестве внешнего интерфейса.

По какой-то причине я получаю эту ошибку относительно моего заголовка: введите описание изображения здесь

Мой код:

Feed. vue

 <template>
   <li>
      {{feed.title}}
   </li>
</template>

<script>
   export default {
      props: ["feed"]
   }
</script>

Приложение. vue

    <template>
  <div id="app">
<Feed></Feed>
   <ul>
      <feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
   </ul>
   </div>
</template>

<script>
import io from 'socket.io-client'
   import Feed from './components/Feed.vue'
   export default {
      components: {
         Feed
      },
      data () {
         return {
            feeds: []
         }
      },
      mounted() {
         this.subscribeToFeed();
      },
      methods: {
         subscribeToFeed() {
            const socket = io();
            socket.on('feed', data => {
               data.feed.entries().forEach(feed => {
                  this.feeds.push(feed);
               });
            });
         }
      }
   }
</script>

Где мне разместить это в моем коде?

   const socket = io();
    socket.on('feed', data => {
      for (const [i, item] of data.feed.entries()) {
        let itemContainer = $('<span></span>')
          .addClass('feed__content')
          .append(`<p>${i + 1}) ${item.title}<p>`)
          .append(`<p>${item.link}</p>`)
          .appendTo('.feed');
      }
    });

Answer 1

Эта ошибка возникает из-за того, что вы объявили компонент Feed без свойств в строке 3 в App.vue.

Ваш код такой:

<template>
  <div id="app">
    <Feed></Feed> <!-- YOU NEED REMOVE THIS LINE -->
    <ul>
      <feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
     </ul>
  </div>
</template>

Правильный код :

<template>
  <div id="app">
    <ul>
      <feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
     </ul>
  </div>
</template>