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">
{{translate("add Brand")}}
<template>
<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=""></field>
<errormessage class="fv-plugins-message-container invalid-feedback" name="ar_name"></errormessage>
</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=""></field>
<errormessage class="fv-plugins-message-container invalid-feedback" name="en_name"></errormessage>
</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=""></field>
<errormessage class="fv-plugins-message-container invalid-feedback" name="image"></errormessage>
</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>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle