Vuetify v-text-field 默认插槽不工作

Question

我正在尝试将自定义过滤器与 Vuetify v-text-field 控件一起使用。我无法使用 v-text-field 控件的默认插槽获取要显示的值。它显然来自 v-input，它似乎工作正常。

这不起作用：

<v-text-field>
   {{ purchasePrice | currency }}
</v-text-field>

这有效：

<v-input>
   {{ purchasePrice | currency }}
</v-input>

我是否缺少模板插槽或其他东西？我已经能够在此控件上成功使用“附加”和“前置”插槽，但不能使用“默认”插槽。有什么建议？

谢谢。

Answer 1

我也刚刚遇到了这个问题，并进行了一些源码挖掘。将我的发现记录如下：

从 Vuetify 2.5.8（最新版本）和任何其他2+版本开始，default插槽在v-text-element.

VTextField.ts 源代码中的相关部分：

genDefaultSlot () {
  return [
    this.genFieldset(),
    this.genTextFieldSlot(),
    this.genClearIcon(),
    this.genIconSlot(),
    this.genProgress(),
  ]
},

它覆盖genDefaultSlot VInput.ts 的方法，该方法作为 mixin 包含在 VTextField.ts 中：

genDefaultSlot () {
  return [
    this.genLabel(),
    this.$slots.default,
  ]
},