Question

我需要创建一些过滤器以用于v-bind，而不是{{ }}。如果过滤器对字符修改（如大写，小写等）进行字符处理，则它可以正常工作。但是对于像修剪那样的事情，输入值不会更新，而是附加数据。

以下是一个示例（https://jsfiddle.net/3nkmjc0c/），我将trim更改为字母更改，因为witespace不容易看到测试。要重现，只需在输入字段中输入a，该字段包含aZ，但数据仍为a。

我不想使用watchers，因为我需要在不同形式的多个输入中使用它，它会像15个观察者一样写。过滤器使其可重复使用。希望您可以帮助或提供其他改变输入值但保持可重用性的途径

Answer 1

我相信这是正常的，而不是你想要的方式。我认为这种情况的顺序与你想象的不同。

输入＆＃34; z＆＃34;
v-on:input次触发器，设置name = z
name已更改，因此Vue会将输入框的值更新为name | trim
name | trim等于＆＃34; zA＆＃34;，显示在输入框中
name 本身在您输入内容之前不会再次更改

因此，在一个案例中，您显示name | trim，而在另一个案例中，您显示name并希望它们相同。

为了它的价值，这曾经在Vue 1中工作，但他们在Vue 2中改变它而没有真正的替代（计算属性除外）。

如果您尝试使用修剪，可以使用.trim修饰符，如下所示：

<input type="text" v-model.trim="name" />

或者如果您想要更多自定义，您必须使用计算属性：

<input type="text" v-model="trimmedName" />

computed: {
    trimmedName: {
    get: function() {
      return this.name
    },
    set: function(value) {
      this.name = value.trim() + "A"
    }
  }
}

不幸的是，尽管有很多需求，但由于某种原因，Vue并不支持自定义表单修饰符。如果您认为这是一个重要的功能，请在这里称重：transpose

VueJS v-bind过滤器更改输入值但不附加数据

1 个答案: