vue.js - How can I set a default value using vue and vee-validate - Stack Overflow

admin管理员组

文章数量:1317906

I am having a problem setting a default value to my custom component that uses vee validate.

and here's the code for my custom component:

<script setup>
import { useField } from 'vee-validate';

const props = defineProps({
    label: String,
    name: String,
    type: String,
    rules: undefined,
    serverError: Array,
});

const { value, handleChange, handleBlur, errorMessage } = useField(
    props.name,
    props.rules,
    {
        label: props.label,
    }
);
</script>

<script>
export default {
    inheritAttrs: false,
};
</script>

<template>
    <div class="form-control w-full">
        <label class="mb-1" v-if="label">
            <span
                class="label-text font-medium"
                :class="{ req: $attrs.required == '' }"
            >
                {{ label }}
            </span>
        </label>
        <input
            class="input input-bordered input-primary border-gray-300 w-full"
            v-bind="$attrs"
            :value="value"
            :type="type"
            @input="handleChange"
            @blur="handleBlur"
        />
        <span class="invalid-feedback" v-if="errorMessage || serverError">
            {{ errorMessage || serverError[0] }}
        </span>
    </div>
</template>

Unfortunately the v-model is not working in updating its value.

Here is my code where I should be updating the value of my input.

async function handleChange(event) {
        const selectedIndex = event.target.selectedIndex;
        const selectedCompany = company.value[selectedIndex];
        console.log(selectedCompany);

        client_type.value = selectedCompany.accountType;

        getNameContactsLeads(selectedCompany.id, selectedCompany.accountType)
    }

本文标签： vuejsHow can I set a default value using vue and veevalidateStack Overflow