雙向過濾器即時更新| 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.