javascript - Vue 3 Reusefull 代码如何在自定义组件中显示特定错误

Question

我按照教程在 Vue 3 上制作自定义组件来构建表单。我修改了 TxtFiel 组件以使用具有不同占位符的相同组件。

例如：

<TxtField placeholder="Hotel" v-model="user.hotel" />
<TxtField placeholder="Nombre" v-model="user.nombre" />
<TxtField placeholder="Apellido" v-model="user.apellido" />

在组件内部，我有一个带有 v-if 指令的 div

<div class="errorMsn" 
     v-if="errors.name">
      {{errors.name}}
</div>

但是当我使用 v-if 指令验证错误消息时，问题就出现了，我看到错误显示在另一个带有 diff 的组件中。占位符。

“文本域.vue”

<template>
    <div class="form-floating component">
        <input type="text"
        class="form-control form-control-sm border border-primary"
        :id="placeholder"
        :placeholder="placeholder"
        autocomplete="off"
        v-model="input"
        @keyup="validateInput"
        @blue="validateInput"
        @input="$emit('update:modelValue', $event.target.value)">
        <label :for="placeholder">{{placeholder}}:</label>
    </div>
    <div class="errorMsn" 
         v-if="errors.name">
        {{errors.name}}
    </div>
    
</template>

 <script>
 import { ref } from "vue";
 import useFormValidation from "../js/useFormValidation.js";
 
 export default {
     props:{
         placeholder:{
             type:String,
             required:true,
         },
         modelValue: String,
     },
    emits:['update:modelValue'],
    setup(props) {
        let input = ref("");
        const {validateNameField, errors } = useFormValidation();
        const validateInput = () =>{
            validateNameField("name", input.value, props.placeholder);
            console.log(errors);
        };
        return {input, errors, validateInput};
    },
};
</script>

标签： javascriptvue.jsvuejs3