我正在尝试使用Vuetify V-Text-Field控件的自定义过滤器。我很难使用V-Text-Field控件的默认插槽来显示一个值。它显然是从V输入中得出的,这似乎可以正常工作。
这不起作用:
<v-text-field>
{{ purchasePrice | currency }}
</v-text-field>
这有效:
<v-input>
{{ purchasePrice | currency }}
</v-input>
我是否错过了模板插槽之类的东西?我已经能够在此控件上成功使用"附加"one_answers"预处"插槽,而不是"默认"插槽。有什么建议吗?
谢谢。
我也遇到了这一点,并进行了一些来源潜水。记录下面的发现:
从VUETIFY 2.5.8
(最新版本)和任何其他2+
版本中,default
插槽在v-text-element
上被忽略。
vtextfield.ts的源代码中的相关部分:
genDefaultSlot () {
return [
this.genFieldset(),
this.genTextFieldSlot(),
this.genClearIcon(),
this.genIconSlot(),
this.genProgress(),
]
},
它覆盖了vinput.ts的 genDefaultSlot
方法,该方法在vtextfield.ts中作为mixin包含:
genDefaultSlot () {
return [
this.genLabel(),
this.$slots.default,
]
},
我只能使其与命名插槽一起使用:(我还重复使用此组件,因此它在内部接受了另一个插槽)
)<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>