英文:
How to set up slot correctly on VeeValidate4
问题
I am rewriting a bunch of components from VeeValidate 3 to VeeValidate 4 and I am facing some issues when it comes to adding slots to render complex HTML.
This is my code:
<template>
<div>
<Field
:name="$t('form.email')"
tag="div"
:rules="`required|email`"
class="form-input"
v-slot="{ field, blur, updateInput }"
>
<label class="form-input-label">
<small class="form-input-title d-block" v-t="'form.email'"></small>
<input
type="text"
class="form-input-field d-block"
v-bind="field"
:disabled="isDisabled"
@input="updateInput"
@blur="blur"
>
<p class="form-input-error"></p>
</label>
</Field>
</div>
</template>
According to the documentation, I should bind the Field to the rendered input via a scoped slot.
But in the console, I am getting the following error:
TypeError: Cannot read properties of undefined (reading 'field')
Can you help me find the issue?
Thanks
英文:
I am rewriting a bunch of components from VeeValidate 3 to VeeValidate4 and I am facing some issue when it comes to add use slots to render complex HTML.
This is my code:
<template>
<div>
<Field
:name="$t('form.email')"
tag="div"
:rules="`required|email`"
class="form-input"
v-slot='{ field, blur, updateInput }'
>
<label
class="form-input-label"
>
<small
class="form-input-title d-block"
v-t="'form.email'"
/>
<input
type="text"
class="form-input-field d-block"
v-bind="field"
:disabled="isDisabled"
@input="updateInput"
@blur="blur"
>
<p class="form-input-error" />
</label>
</Field>
</div>
</template>
According to the documentation, I should bind the Field to the rendered input via a scoped slot.
But in the console I am getting the following error
TypeError: Cannot read properties of undefined (reading 'field')
Can you help me find the issue?
Thanks
答案1
得分: 0
我只是缺少了关于 Field 对象的全局导入。
英文:
I simply was missing a global import for the Field object.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论