如何处理vee-validate中重复的v-slot名称?
问题描述
使用vee-validate的Form和Field组件编写了如下代码:
<Form v-slot="{ errors }" as="v-form" > <v-card-text> <Field name="username" v-slot="{ field, errors }" rules="required" > <v-text-field v-bind="field" v-model="username" label="user" :error-messages="errors" ></v-text-field> </Field> <Field name="password" v-slot="{ field, errors }" rules="required" > <!-- 期望在此打印Form插槽的errors --> <v-text-field v-bind="field" v-model="password" label="password" :error-messages="errors" v-on:keyup.enter="() => {console.log(errors)}" ></v-text-field> </Field> </v-card-text> </Form>
目前密码框keyup.enter事件输出的是当前Field组件插槽的errors,需求是打印Form组件插槽的全局errors,如何区分这两个同名的errors?
解决方法
通过变量重命名解决同名变量覆盖问题:
重命名Form插槽的errors变量
在Form的v-slot中将errors重命名为全局作用域的变量(比如formErrors),避免和Field插槽的errors冲突:<Form v-slot="{ errors: formErrors }" as="v-form" > <!-- 原有内部代码保持不变 --> </Form>在密码框事件中使用重命名后的变量
修改密码框的keyup.enter事件逻辑,打印formErrors即可获取Form的全局错误集合:<v-text-field v-bind="field" v-model="password" label="password" :error-messages="errors" v-on:keyup.enter="() => {console.log(formErrors)}" ></v-text-field>
这样就能明确区分Form的全局错误和单个Field的字段错误,不会因为变量名相同导致作用域覆盖。
内容的提问来源于stack exchange,提问作者rzlvmp
相关产品推荐
相关产品推荐

