Vuetify v-text-field Слот по умолчанию не работает - PullRequest
Новая
       9

Vuetify v-text-field Слот по умолчанию не работает

0 голосов
/ 21 февраля 2019

Я пытаюсь использовать пользовательский фильтр с элементом управления v-text-field Vuetify.У меня возникли проблемы при получении значения для отображения с использованием слота по умолчанию элемента управления v-text-field.По-видимому, он получен из v-input, который, кажется, работает нормально.

Это не работает: 

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

Это работает: 

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

Я пропалслот для шаблона или что-то?Я смог успешно использовать слоты "append" и "prepend" на этом элементе управления, но не слот "default".Есть предложения?

Спасибо.

1 Ответ

0 голосов
/ 15 мая 2019

Я мог бы заставить его работать только с именованными слотами: (Кроме того, я повторно использую этот компонент, поэтому он принимает другой слот внутри) 

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