vue.js - 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>

提前致谢！