配列を使って検索するJSON Vue

Question

これは初めてのVuejsです。私は配列に格納されているflickr APIからイメージを読み込むWebアプリケーションを構築しています。私は入力された単語に基づいて画像をフィルタリングする基本的な検索バーをしたいと思いますが、私はそれを行う方法がわかりません。

私は私のテンプレート

<input type="text" v-model="search" placeholder="search for image" /> 
... 
<li class="media" v-for="flickrImage in flickrImage"> 

に私が検索のために持っている機能があるしている：

export default { 
name: 'Flickrlist', 
data() { 
    return { 
    flickrImage: [], 
    search: '' 
    } 
}, 

computed: { 
    filteredImage: function() { 
    return this.flickrImage.filter((flickrImage) => { 
     return this.flickrImage.title.match(this.search) 
    }); 
    } 
} 

にはどうすればfilteredImageを渡すことができますか？

Answer 1

フィルタ関数で正しい変数を参照していません。

filteredImage: function() { 
    return this.flickrImage.filter((flickrImage) => { 
     return this.flickrImage.title.match(this.search) 
    }); 
} 

filteredImage: function() { 
    return this.flickrImage.filter((x) => { 
     return x.title.match(this.search) 
    }); 
} 

であるべきそれからちょうどここ

<li class="media" v-for="flickrImage in filteredImage"> 

にテンプレートを更新する必要があなたのものに基づいて作業JSFiddleです：V-でhttps://jsfiddle.net/qt8m2rwr/1/