双向过滤器即时更新| Vue.js

Question

如何为模型做定制的双向过滤器，在Vue.js中快速更新。

以下来自docs的代码示例适用于输入模糊。但我需要它在按键上工作。

Vue.filter('currencyDisplay', { 
    read: function(val) { 
    return '$'+val.toFixed(2) 
    }, 
    write: function(val, oldVal) { 
    var number = +val.replace(/[^\d.]/g, '') 
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) 
    } 
}) 

非常感谢您的帮助！

Answer 1

您可以用get和set方法火过滤器的read和write方法，分别建立计算性能应用过滤器到Vue公司的数据属性：

data() { 
    return { 
    foo: 0, 
    } 
}, 
computed: { 
    filteredFoo: { 
    get() { 
     return Vue.filter('currencyDisplay').read(this.foo); 
    }, 
    set(value) { 
     this.foo = Vue.filter('currencyDisplay').write(value); 
    } 
    } 
} 

Here's a working fiddle.