Vue.js Failed to resolve filter: key
转自:https://stackoverflow.com/questions/35835214/vue-js-failed-to-resolve-filter-key
I am following this tutorial https://laracasts.com/series/search-as-a-service/episodes/2 and got stuck on the following error
[Vue warn]: Invalid expression. Generated function body: scope.keyup:scope.search
[Vue warn]: Failed to resolve filter: key
shown in console.
This is the code.
<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>
Am I missing something? or is the tutorial outdated?
v-on="keyup: search | key 'enter'"
is a old version declaration, change to this:
v-on:keyup.enter="search"
Vue.js Failed to resolve filter: key的更多相关文章
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
- Failed to resolve filter报错原因
问题 页面写过滤器,控制台报错,Failed to resolve filter 分析 语法错误?先检查 ``` {{ params | filterA }} filters: { filterA: ...
- electron-vue [Vue warn]: Failed to resolve directive: decorator
electron-vue引入ant-desigin-vue使用ant自定义指令 v-decorator报销 <a-form-item> <a-input v-decorator=&q ...
- 解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性
之前遇到过一个奇怪的问题,在其他浏览器下一切正常,但在万恶的IE下,却一直不行. 具体问题场景就是:比如orderDetail页面出现问题,那么只要是路由跳转的,点第1次无法跳转,必须得点第2次才可以 ...
- 简单易懂的 Vue.js 基础知识 !
根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold <!-- 这是我们的 View - ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){ this.fetchPostLis ...
- Vue.js(2.x)之列表渲染(v-for/key)
1.v-for是Vue里的循环语句,与其他语言的循环大同小异.首先得有需要循环且不为空的数组,循环的关键字为in或of. 需要索引时的写法: v-for里的in可以使用of代替: 还可以使用v-for ...
随机推荐
- 服务容错保护断路器Hystrix之八:Hystrix资源隔离策略
在一个基于微服务的应用程序中,您通常需要调用多个微服务完成一个特定任务.不使用舱壁模式,这些调用默认是使用相同的线程来执行调用的,这些线程Java容器为处理所有请求预留的.在高服务器请求的情况下,一个 ...
- NIO框架之MINA源码解析(四):粘包与断包处理及编码与解码
1.粘包与段包 粘包:指TCP协议中,发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾.造成的可能原因: 发送端需要等缓冲区满才发送出去,造成粘包 接收 ...
- 学习笔记之Introduction to Data Visualization with Python | DataCamp
Introduction to Data Visualization with Python | DataCamp https://www.datacamp.com/courses/introduct ...
- H5移动端开发vue+vux
项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue 渐进式 JavaScript 框架 http://cn.vuejs.org/v2/guide/2: ...
- python中转义符&str格式化
转义字符: 1.将有意义的字符变的无意义 2.将无意义的字符变的有意义 语法: \ + 某个字符 \n, \r\n : 代表换行 \t : 代表一个缩进, (水平制表符) \r : ...
- mysql 中 myisam innodb 的区别
区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...
- CCProxy
我在之前的博客里提到了用Teamviewer + CCProxy做内网穿透,当时只是简单提了一下,因为发现这种方式网速比较慢.今天又用到了它,虽然慢点,但是总比没的用好,哈哈哈.不得不感叹CCProx ...
- 添加删除mysql用户
create user 'hive_user'@'%' identified by '密码'; grant all privileges on hive.* to hive_user@'%'; cre ...
- shell脚本选择LOG里面特定的行,生成新文件并rsync上传
rsync.sh #!/bin/bash tool_path=$(cd `dirname $`; pwd) eval `cat ${tool_path}/conf.properties` rsync_ ...
- oracle查看和替换含不可见字符(空白)
select lengthb('1397256'), dump('1397256') from dual; select ascii('') from dual; ), '') from dua ...