[英]Display RSS Feed on front end
我想在我的 Vue.js 應用程序上顯示此 Google Alert RSS Feed ( https://www.google.ie/alerts/feeds/10663948362751557705/45110340722220974544 ) 中的一系列文章。
我創建了一個“Feed.vue”組件並希望在“App.vue”上顯示提要。 我的后端是 Express.js。 首先,我這樣做是否正確? 我在 Javascript 中得到了這個,但我想使用 Vue.js 作為我的前端。
出於某種原因,我收到關於我的標題的錯誤:在此處輸入圖片描述
我的代碼:
飼料.vue
<template>
<li>
{{feed.title}}
</li>
</template>
<script>
export default {
props: ["feed"]
}
</script>
應用程序
<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');
}
});
發生此錯誤是因為您在App.vue
第 3 行中聲明了沒有屬性的Feed
組件。
你的代碼是這樣的:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.