时间戳

首页 > 解决方案 > 如何调整官方 Vue 过滤器示例以使用 Vuetify 的`v-text-field`

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

问题描述

我想要做的是应用文档中的以下 Vue 示例来使用 v-text-field 组件：https ://vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced

使用简单的输入字段时，它工作正常，但使用 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在第一个字段中输入，然后在第二个字段中输入。该值在第一个字段中正确截断，但在第二个字段中未截断。

任何人都知道如何解决这个问题？

标签： javascriptvue.jsvuetify.js

解决方案

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

解决方法是使用一些内部字段，观察主值道具并将内部字段更改nextTick为正确的值 - 我分叉了 codepen，请参阅此https://codepen.io/anon/pen/KBvZEq

v-text-field同样作为另一种解决方案，您可以访问这样的“本机”输入值

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

但我认为它会带来一些新问题，看起来像“肮脏”的方式。

推荐阅读