Vuejs双向过滤器报错
来源:3-5 事件绑定-内置事件绑定、自定义事件绑定
EugenioCode
2017-05-20
<!DOCTYPE html>
<html>
<head>
<title>自定义过滤器</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>{{ msg | addZero }}</h3>
<h3>{{ num | number(3,10) }}</h3>
<input type="text" v-model="message">
{{ message |currentNumber}}
</div>
<script type="text/javascript">
Vue.config.devtools = true;
new Vue ( {
el:'#app',
data: {
msg:1,
num:3.1415926,
message:3.1415926
},
filters:{
// 单向过滤器
addZero:function(data){
return data<10?'0'+data:data;
},
number:function(data,n,m){
return Number(data.toFixed(n))+m
},
// 双向过滤器
currentNumber:{
read:function(data){ //model--->view
return "$"+data.toFixed(2)
},
write:function(newValue,oldValue){//view--->model
return +newValue.replace(/[^\d.]/g,'')
}
}
}
} )
</script>
</body>
</html>双向过滤器报错,用的2.0的版本

写回答
1回答
-
我没用过双向过滤器,你可以参考一下这块: https://cn.vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced
这里是说双向过滤有隐含的问题,也给出了解决方法,2.0是否支持read和write我不清楚。
看报错,应该是说过滤器没有绑定一个方法,导致的
currentNumber:{
read:function(data){ //model--->view
return "$"+data.toFixed(2)
},
write:function(newValue,oldValue){//view--->model
return +newValue.replace(/[^\d.]/g,'')
}
}
这里的右侧,是个对象
012017-07-10
相似问题