Vuetify v-text-field 默认插槽不起作用答案

【问题标题】：Vuetify v-text-field Default Slot Not WorkingVuetify v-text-field 默认插槽不起作用
【发布时间】：2019-07-14 17:14:47
【问题描述】：

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

这不起作用：

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

这行得通：

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

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

谢谢。

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

我只能让它与命名槽一起工作：（另外，我正在重用这个组件，所以它在内部接受另一个槽）

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

【讨论】：

【解决方案2】：

我也遇到了这个问题，并进行了一些来源潜水。在下面记录我的发现：

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

source code of VTextField.ts中的相关部分：

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

它覆盖了genDefaultSlotmethod of VInput.ts，它作为mixin包含在VTextField.ts中：

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

【讨论】：