Vue js http请求循环

Question

我正在尝试创建一个实时搜索表单，只要有用户输入，就会调用http请求。到目前为止，实时搜索工作正常，但http请求导致循环。当我将catalog_items分配给this.items时会出现此问题。

Vue.js

Vue.filter('searchFor', function (value, searchString) {

    var result = [];

    if(!searchString || searchString.length < 2){
        return value;
    }

    searchString = searchString.trim().toLowerCase();

    this.fetchData(searchString);
    result = this.items;

    return result;
})

new Vue({
    el: '#searchform',
    data: {
        searchString: "",
        items: []
    },
    methods: {
        fetchData: function (name) {
            this.$http.get('api_url' + name )
            .then(function(response){
                var data = response.data;
                var catalog_items = data['catalog_items'];
                this.items = catalog_items;
            })
        }
    }
})

html搜索输入：

<input type="text" v-model="searchString" placeholder="Enter your search terms" />
<ul>
    <li v-for="item in catalog_items | searchFor searchString">
        <p>@{{item.name}}</p>
    </li>
</ul>

提前致谢！