Javascript 如何调整官方Vue过滤器示例以使用Vuetify的“v-text-field”`

我尝试的是应用文档中的以下Vue示例来使用v-text-field组件：

当使用简单输入字段时，它工作正常，但当使用v文本字段时，会导致字段中显示的内容与Vue Devtools中的值本身不匹配

我创建了一个代码笔来演示我的问题：。我正在替换基本输入字段：

第一个字段是Vue文档中的示例，第二个字段是相同的字段，但随后使用v-text-field组件而不是输入字段。 在第一个字段中键入与在Vue文档中一样正常，但在第二个字段中键入的数字格式与第一个字段的格式不同

重现问题：在第一个字段中键入12.3456，然后在第二个字段中键入。该值在第一个字段中正确截断，但在第二个字段中未截断

---

有人知道如何解决这个问题吗？

你不能使用，因为你正在改变道具

this.$refs.input.value=currencyValidator.formatthis.value

相反，您应该使用$emit输入：

此.$emit'input'，currencyValidator.formatthis.value

不要忘记将其作为数字发出。

主要问题在于此。$refs.input.value，因为v-text-field是组件，而此字段与内部标记值无关

解决方法是使用一些内部字段，观察主值属性，并在nextTick中将内部字段更改为正确的值-I forked codepen，参见此

另外，作为另一个解决方案，您可以像这样访问v-text-field的本机输入值

this.$refs.input.$el.getElementsByTagName('input')[0].value

---

但我认为这会带来一些新问题，看起来很肮脏。

您的代码笔在键入[Vue warn]时会抛出错误：“input”的事件处理程序中出现错误：“'TypeError:无法读取未定义的属性'value'@barbsan Ok，在更新的CodePen@lowerends两个字段的行为相同，你是什么意思？此外，不存在闭合的v-text-field，并且不应修改道具[Vue warn]：请避免直接修改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的属性：键入前的“值”anything@barbsan这是我试图为这个特定用例解决的问题之一。谢谢，这真的是一个非常有用的解决方案。但有一件事：当键入字母字符时，有没有办法避免看到该字符的小故障？在当前的解决方案中，不允许的字符在消失之前会短暂显示。@lowerends这是由于$nextTick执行稍晚，不幸的是，只有在与问题代码笔相同的时间内直接更改本机输入值，才能避免这种情况。

<v-text-field
    ref="input"
    v-bind:value="value"
    v-on:input="updateValue($event.target.value)"
    v-on:focus="selectAll"
    v-on:blur="formatValue"
><v-text-field>

this.$refs.input.$el.getElementsByTagName('input')[0].value