Vuetify v-text-field 默认插槽无效

Question

我尝试在Vuetify v-text-field控件中使用自定义过滤器，但是我无法在v-text-field控件的默认插槽中显示值。它显然是从v-input派生而来，而v-input似乎可以正常工作。

这种方式不起作用：

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

这个是有效的：

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

我是否漏掉了模板插槽或其他什么内容？我已成功地在此控件上使用了“追加”和“前置”插槽，但无法使用“默认”插槽。有什么建议吗？

谢谢。

- connr

Answer 1

我也遇到了这个问题，并进行了一些源代码调查。以下是我的发现：

在Vuetify 2.5.8（最新版本）和任何其他2+版本中，v-text-element上的default插槽将被忽略。

在VTextField.ts的源代码中，相关部分如下：

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

它覆盖了包含在VTextField.ts中的mixin genDefaultSlot VInput.ts的方法。

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

- Amade

Answer 2

我只能使用具名插槽实现它：（另外，我正在重用此组件，因此它在内部接受另一个插槽）

<template>
  <v-layout>
    <v-text-field
      :type="type"
      v-bind="
        // https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
        $attrs
      "
      @input="$emit('update', $event)"
      v-on="
        // https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
        $listeners
      "
    >
    <!-- ⬇️ HERE  ⬇️ -->
      <template v-slot:label>
        <slot></slot>
      </template>
    </v-text-field>
  </v-layout>
</template>


<script>
import { defaultMaterialTextFiledsProps } from '~/config/inputsStyle'

// See https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_base-input-text.vue
export default {
  // Disable automatic attribute inheritance, so that $attrs are
  // passed to the <input>, even if it's not the root element.
  // https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: 'text',
      // Only allow types that essentially just render text boxes.
      validator(value) {
        return [
          'email',
          'number',
          'password',
          'search',
          'tel',
          'text',
          'url'
        ].includes(value)
      }
    }
  }
}
</script>

- Paul Melero