I want to display a series of articles from this Google Alert RSS Feed ( https://www.google.ie/alerts/feeds/10663948362751557705/4511034072220974544 ) on my Vue.js application.
I have created a "Feed.vue" component and wish to display the feed on "App.vue". My backend is Express.js. First off, am I even doing this correct? I got this working in Javascript but I want to use Vue.js as my front end.
For some reason I am getting this error regarding my title: enter image description here
My code:
Feed.vue
<template>
<li>
{{feed.title}}
</li>
</template>
<script>
export default {
props: ["feed"]
}
</script>
App.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>
Where do I place this in my code?
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');
}
});
This error happen, because you declared the Feed
component without properties in line 3 in App.vue
.
Your code is that way:
<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>
The correct code is:
<template>
<div id="app">
<ul>
<feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
</ul>
</div>
</template>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.