検索ボックス検索機能

htmlセクション

<form id="main" v-cloak>
 
 <div class="bar">
 <!-- searchString モデルとテキスト・フィールドの作成バインディング -->
 
 <input type="text" v-model="searchString" placeholder="検索内容の入力" />
 </div>
 
 <ul>
 <!-- ループでデータを出力する--。>
 
 <li v-for="article in filteredArticles">
 <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
 <p>{{article.title}}</p>
 </li>
 </ul>
 
</form>
js:

jsセクション：

data: {
 searchString: "",
 
 // データモデル、Ajaxによって得られる実際の環境
 
 articles: [
 {
 "title": "What You Need To Know About CSS Variables",
 "url": "https://..com/css/css-.html",
 "image": "https://..com/images/icon/.png"
 },
 {
 "title": "Freebie: 4 Great Looking Pricing Tables",
 "url": "https://..com/html/html-.html",
 "image": "https://..com/images/icon/.png"
 },
 {
 "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
 "url": "https://..com/css3/css3-.html",
 "image": "https://..com/images/icon/.png"
 },
 {
 "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
 "url": "https://..com/css3/css3-.html",
 "image": "https://..com/images/icon/.png"
 },
 {
 "title": "Learn SQL In 20 Minutes",
 "url": "https://..com/sql/sql-.html",
 "image": "https://..com/images/icon/.png"
 },
 {
 "title": "Creating Your First Desktop App With HTML, JS and Electron",
 "url": "https://..com/js/js-.html",
 "image": "https://..com/images/icon/.png"
 }
 ]
 },
 //最も重要な部分
 computed: {
 // 計算、マッチング検索
 filteredArticles: function () {
 var articles_array = this.articles,
 searchString = this.searchString;
 
 if(!searchString){
 return articles_array;
 }
 
 searchString = searchString.trim().toLowerCase();
 
 articles_array = articles_array.filter(function(item){
 if(item.title.toLowerCase().indexOf(searchString) !== -1){
 return item;
 }
 })
 
 // 配列が来た後に返す
 return articles_array;;
 }
 }