updating field values dynamically
Hi I'm using metronic vue demo 1,
I created a modal to handle creating and updating data, when updating the data should appear in the text fields so the user can change it, but that didn't work for me.
I have tried multiple tricks, her is my code
<template>
<custom-modal :form="formData" :schema="schema" @save="save">
{{translate("add Brand")}}
<template #basic>
<div class="mb-10 fv-row">
<slot name="basic"></slot>
<label class="form-label mb-3">{{ translate("arabic title") }}</label>
<Field
type="text"
class="form-control form-control-lg form-control-solid"
name="ar_name"
placeholder=""
value=""
/>
<ErrorMessage
class="fv-plugins-message-container invalid-feedback"
name="ar_name"
/>
</div>
<div class="mb-10 fv-row">
<slot name="basic"></slot>
<label class="form-label mb-3">{{ translate("english title") }}</label>
<Field
type="text"
class="form-control form-control-lg form-control-solid"
name="en_name"
placeholder=""
value=""
/>
<ErrorMessage
class="fv-plugins-message-container invalid-feedback"
name="en_name"
/>
</div>
<div class="mb-10 fv-row">
<slot name="basic"></slot>
<label class="form-label mb-3">{{ translate("image") }}</label>
<Field
type="file"
class="form-control form-control-lg form-control-solid"
name="image"
accept="image/*"
placeholder=""
value=""
/>
<ErrorMessage
class="fv-plugins-message-container invalid-feedback"
name="image"
/>
</div>
</template>
</custom-modal>
</template>
<script setup lang="ts">
import CustomModal from "@/components/custom/custom-modal1.vue";
import {useI18n} from "vue-i18n";
import * as Yup from "yup";
import {onMounted, onUpdated, ref, watch} from "vue";
import {mixed} from "yup";
import {useBrandsStore} from "@/stores/brands";
import AlertService from "@/core/services/AlertService";
import {ErrorMessage, Field, useForm} from "vee-validate";
const { t, te } = useI18n();
const translate = (text: string) => {
if (te(text)) {
return t(text);
} else {
return text;
}
}
let props = defineProps({
data: Object
});
const formData = ref({
ar_name: "",
en_name: "",
image: ""
});
const schema = [
Yup.object({}),
Yup.object({
ar_name: Yup.string().required().label(translate("arabic title")),
en_name: Yup.string().required().label(translate("english title")),
image: Yup.object().shape({
image: mixed().test("fileSize", translate("The file is too large"), (value) => {
if (!value?.length) return true // attachment is optional
return value[0].size <= 2000000
}),
})
}),
Yup.object({}),
];
const { resetForm } = useForm({
validationSchema: schema,
});
watch(props, () => {
formData.value.ar_name = props?.data?.name.ar ?? ""
formData.value.en_name = props?.data?.name.en ?? ""
resetForm({
values: {
...formData.value,
},
});
});
const save = async (data) => {
let brand = {
name: {
ar: data.ar_name,
en: data.en_name,
},
image: data.image
};
await useBrandsStore().create(brand)
AlertService(useBrandsStore())
}
</script>
Replies (3)
Hi,
Thank you for reaching out to us.
Please make sure that your props have been successfully passed to your component and that props have the properties you are referring to.
Also, you can set your form init data with initialValues property.
const { resetForm } = useForm({
validationSchema: schema,
initialValues: {
ar_name: props?.data?.name.ar ?? "",
en_name: props?.data?.name.ar ?? "",
},
});Or you can set it directly to your Field component using the value attribute.
:value="props.data.name.ar"Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi thank you for the response
I tried both ways before contacting you, I'm sure that my props are passed using Vue dev tools, but the UI doesn't reflect the change
Hi,
The 'props' object is reactive, which means changes in the parent component should trigger a re-render in the child component.
Have you tried assigning a plain string instead of using props data? If it works with a plain string, the issue might not be with how you assign values but rather with how you pass or use them in your component.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
