Vue.js (v. 1.0.14) Vue Filter versus Vue Validator

Vue.js (v. 1.0.14) Vue Filter versus Vue Validator

本文关键字：Vue Filter versus Validator js      更新时间：2023-09-26

我有一个表单，我正在尝试在某些输入上使用 Vue 的"货币"过滤器，然后使用 Vue 验证器 （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/

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

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

当您键入 1-2-3 时，它如下所示：

1 =>

  • baz = 1
  • 输入显示 $1.00

2 =>

  • baz = "$1.002"
  • 输入显示"（因为货币筛选器无法解析"$1.002"）

3 =>

  • baz = 3
  • 输入显示"$3.00"

部分问题在于内置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']" />

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

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

相关文章：