Vue.js 无法解析过滤器：键

Question

我正在关注本教程 https://laracasts.com/series/search-as-a-service/episodes/2 并陷入以下错误

[Vue warn]: Invalid expression. Generated function body:  scope.keyup:scope.search
[Vue warn]: Failed to resolve filter: key 

显示在控制台中。

这是代码。

<input type="text" v-model="query" v-on="keyup: search | key 'enter'">
    <div class="results">
        <article v-for="movie in movies">
            <h2> @{{ movie.name  }}</h2>
            <h4> @{{ movie.rating  }}</h4>
        </article>
    </div>
</div>

    <script src="http://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>
    <script>
        new Vue ({
            el: 'body',
            data: { query: '' , movies: [] },


            ready: function (){
                this.client = algoliasearch('AH9XU5726U', '58fd00912ce725b3f627cfa6cb8292ee');
                this.index = this.client.initIndex('getstarted_actors');
            },
            methods: {
                search: function () {
                    this.index.search(this.query, function(error, results){
                        this.movies = results.hits;
                    }.bind(this));
                }
            }

        });
    </script>

我错过了什么吗？还是教程过时了？

Answer 1

v-on="keyup: search | key 'enter'" 

是旧版本声明，改成这样：

v-on:keyup.enter="search"

http://vuejs.org/guide/events.html#Key_Modifiers