Setting Vee-Validate initial value from API #3744
-
Hi, I'm trying to use Vee-Validate and I'm struggling with using initial values loaded from API and getting the value whether the form is dirty or not.
The thing is, when I use a simple object like But what is the correct way to set initial values to the Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 10 replies
-
You should use const { handleSubmit, errors, meta, resetForm } = useForm({
// ....
});
onMounted(async () => {
const api = useApi()
const { data } = (await api.get(`/companies/${store.currentCompany.id}`));
resetForm({ values: data });
})
Which means |
Beta Was this translation helpful? Give feedback.
-
I try to solve similar task, but in my case i store the data from the API in Pinia Store and use the data later. By itself it works, but it is not reactive (as I understand). Only after a reload the page, the correct data is displayed. onMounted(async () => {
await getBoards(); // fetch data from the API and store in Pinia
const board = computed(() => boardStore.getBoardById(boardStore.activeBoardId)); // I think something is wrong here
resetForm({
values: {
name: board.value.name,
},
});
}); Maybe I will find the bug myself later, but if someone has an idea, gladly :-) |
Beta Was this translation helpful? Give feedback.
-
I found a solution, maybe not the best one, but it's work: onMounted(async () => {
await getBoards(); // fetch data from the API and store in Pinia
setBoardName();
});
watch(
() => boardStore.activeBoardId,
() => setBoardName()
);
const setBoardName = () => {
const board = computed(() => boardStore.getBoardById(boardStore.activeBoardId));
resetForm({
values: {
name: board.value.name,
},
});
}; |
Beta Was this translation helpful? Give feedback.
You should use
resetForm
to assign initial values:resetForm
does two things:Which means
dirty
would befalse
since the initial values match the current ones.