Vue

by Vince Oveson

HTML

<div id="app">
  <label for="search">Search Blogs:</label>
  <input type="text" id="search" v-model="search">
  <hr>
  <ul>
    <li v-for="blog in filteredBlogs" v-text="blog.blogName">
    </li>
  </ul>
</div>

Vue

const blogs = [
	{ blogName: "foo" },
	{ blogName: "bar" },
	{ blogName: "baz" }
];

new Vue({
	el: '#app',
  data() {
  	return {
    	clubs: blogs,
      search:'',
    };
  },
  computed: {
  	filteredBlogs() {
			if (this.search !== '') {
      	return this.clubs.filter((blog) => {
        	return blog.blogName.match(this.search);
        });
      }
      
      return this.clubs;
    }
  }
});