Skip to content

Instantly share code, notes, and snippets.

@karimal
Last active June 25, 2018 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save karimal/fe245740e0f8155e1a5da3347ab3d94b to your computer and use it in GitHub Desktop.
Save karimal/fe245740e0f8155e1a5da3347ab3d94b to your computer and use it in GitHub Desktop.
Feed component for Vuejs
<template id="feed">
<div>
<div v-for="tweet in feed" :key="tweet.title" class="tweet">
<div class="avatarContainer">
<img :src="tweet.avatar" class="avatar" width="70" height="70">
</div>
<div class="tweetBody">
<div class="tweetHead">
<span class="author">
{{ tweet.author }}
</span>
{{ tweet.date }}
</div>
<div class="tweetContent">
{{ tweet.body }}
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
data: store.data
}
},
computed: {
feed() {
return this.data.feed.filter(tweet => {
return tweet.body.indexOf(this.data.search) > -1;
})
}
}
}
</script>
<style>
.avatarContainer {
margin-right: 20px;
}
.avatar {
margin-top: 3px;
border-radius: 50%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment