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的版本

http://szimg.mukewang.com/592025ec00010b2a27350509.jpg

写回答

1回答

fishenal

2017-05-22

我没用过双向过滤器,你可以参考一下这块: 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,'')

                    }

                }


这里的右侧,是个对象

0
1
EugenioCode
非常感谢!
2017-07-10
共1条回复

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0,组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程