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

Question

我要做的是应用文档中的以下Vue示例来使用v-text-field组件：https://v2.vuejs.org/v2/guide/migration.html#Two-路过滤器取代

当使用简单的输入字段时，它可以正常工作，但当使用v-text-field时，它会导致字段中显示的内容与值本身不匹配(正如Vue Devtools所示(。

我创建了一个CodePen来演示我的问题：https://codepen.io/anon/pen/EpvaWQ.我正在替换基本的input字段：

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

使用Vuetify的v-text-field:

<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>

第一个字段是Vue文档中的示例，第二个字段是相同的字段，但使用的是v-text-field组件，而不是输入字段。在第一个字段中键入可以按预期工作(就像在Vue文档中一样(，但在第二个字段中输入的数字格式与第一个字段不同。

要重现问题，请在第一个字段中键入12.3456，然后在第二个字段中输入。该值在第一个字段中被正确截断，但在第二个字段中不会被截断。

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

Answer 1

主要问题出现在this.$refs.input.value中，因为v-text-field是组件，并且此字段与内部<input>标记值无关。

解决方法是使用一些内部字段，监视主值道具，并更改nextTick中的内部字段以更正值-我分叉了代码笔，请参阅https://codepen.io/anon/pen/KBvZEq

此外，作为另一种解决方案，您可以访问v-text-field的"本地"输入值，如此

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

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

Answer 2

您不能使用，因为您正在更改道具。

this.$refs.input.value = currencyValidator.format(this.value)

相反，您应该使用$emit-input:

this.$emit('input', currencyValidator.format(this.value))

别忘了把它作为数字发射。