Created
January 11, 2017 04:56
-
-
Save anonymous/f0afc26b565bfaad9733155ddc0f174c to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/huwidisicu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div id="app" class="container"> | |
<div class="form-group"> | |
<input type="text" v-model="query" class="form-control"> | |
</div> | |
<ul class="list-group"> | |
<li v-for="story in matches()" class="list-group-item"> | |
{{ story.name }}- {{ story.plot }}, upvotes: {{ story.upvotes }} | |
</li> | |
</ul> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> | |
<script id="jsbin-javascript"> | |
new Vue({ | |
el: '#app', | |
data: { | |
stories: [ | |
{name: 'Alex Goat', plot: 'Beauty and the beast...', upvotes: 67}, | |
{name: 'Chressey Chrostanza', plot: 'Uptown frank...', upvotes: 40}, | |
{name: 'Liam Nelson', plot: 'I will find you and kill you...', upvotes: 167}, | |
], | |
query: '' | |
}, | |
computed: { // --> computed returns the value | |
search() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
}, | |
methods: { // --> methods have to be executed | |
matches() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
} | |
}) | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">new Vue({ | |
el: '#app', | |
data: { | |
stories: [ | |
{name: 'Alex Goat', plot: 'Beauty and the beast...', upvotes: 67}, | |
{name: 'Chressey Chrostanza', plot: 'Uptown frank...', upvotes: 40}, | |
{name: 'Liam Nelson', plot: 'I will find you and kill you...', upvotes: 167}, | |
], | |
query: '' | |
}, | |
computed: { // --> computed returns the value | |
search() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
}, | |
methods: { // --> methods have to be executed | |
matches() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
} | |
})</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: '#app', | |
data: { | |
stories: [ | |
{name: 'Alex Goat', plot: 'Beauty and the beast...', upvotes: 67}, | |
{name: 'Chressey Chrostanza', plot: 'Uptown frank...', upvotes: 40}, | |
{name: 'Liam Nelson', plot: 'I will find you and kill you...', upvotes: 167}, | |
], | |
query: '' | |
}, | |
computed: { // --> computed returns the value | |
search() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
}, | |
methods: { // --> methods have to be executed | |
matches() { | |
return this.stories.filter(story => { | |
return story.plot.includes(this.query) | |
}) | |
} | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment