Question

我有一个表单，我试图在某些输入上使用Vue的“货币”过滤器，然后使用Vue Validator（https://github.com/vuejs/vue-validator）进行验证。

HTML

<validator name="foo">
  <input id="example" type="tel" v-model="baz | currency" v-validate:bar="['required']" />...
  <span> equals {{ baz }}</span>...
</validator>

的JavaScript

Vue.config.warnExpressionErrors = false;

var vm = new Vue({
    el: '#demo',
    data: {
    baz: ''
    }
});

经过筛选和验证的字段会随着每次击键而更新 - 这样每次都会清除/重置它们。效果是尝试键入一个数字，例如1234，将导致<input>显示“$ 3.004”或“$ 4.00”（尽管你可能会看到：“$ 1.00”“$ 1.002”“$ 2.00”“$ 2.003”或键入时“$ 3.00”。

我认为过滤器和组件之间存在冲突，因此对该值有最终决定权（？）

我很可能没有正确实现这一点。我把这个问题提炼到了他跟随JSFiddle ......

的重要组件

http://jsfiddle.net/itopizarro/b9a2oyL4/

Answer 1

我认为主要问题与currency过滤器有关。每次输入中出现key事件时，都会发生以下情况：

模型的值更新为输入值
读取更新的模型，通过货币过滤器过滤并显示在输入中（光标放在最后）

当你输入1-2-3时，它会是这样的：

1 =＆gt;

baz = 1
输入显示$ 1.00

2 =＆gt;

baz =＆＃34; $ 1.002＆＃34;
输入显示＆＃34;＆＃34; （因为货币过滤器无法解析＆＃34; $ 1.002＆＃34;）

3 =＆gt;

baz = 3
输入显示＆＃34; $ 3.00＆＃34;

问题的一部分是内置的currency过滤器是一个单向过滤器 - 它将模型格式化以便显示，但在写回数据时不做任何事情。您可以尝试编写自己的双向货币过滤器。这是一个样本：

Vue.filter('currencyInput', {
  // model -> view
  read: function(value) {
    // use the built-in currency filter for display
    var currencyFilter = Vue.filter('currency');
    return currencyFilter(value);
  },
  // view -> model
  write: function(value, oldValue) {
    var number = +value.replace(/[^\d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
})

这可确保模型显示为货币，但以数字形式写入/存储。这仍然不完美，因为每次键入时，数据都会被格式化并且光标移动到最后。

您可以在输入中使用debounce或lazy属性，这样更新就不会发生，直到用户暂停或从该字段移动为止。

<input id="example" type="tel" v-model="baz | currencyInput" debounce="500" v-validate:baz="['required']" />

但是，当用户输入时，您不会立即获得格式化。

我想这取决于你的要求。希望这会给你一些想法。

Vue.js（v.1.0.14）Vue过滤器与Vue验证器

1 个答案: