Metronic Vue: passing data to modal
Hi - is there a good way to pass data to for example "AddCustomerModal.vue" from CustomerListing.vue ?
I want my modal to be used for not just adding records but also editing records.
To edit a record, I have the Edit button for each row in the datatable which calls a function that shows the modal. Before I show the modal, I populate a ref() variable with the data from the row that was clicked.
I tried passing the "current record" to the Modal component and access it via props in the modal component but the modal component only runs through the <script> section on initial page load. Therefore the modal never gets the data I pass it real-time and the form cannot be prefilled with existing values from the database.
Should I use vuex store to pass data around to this component? There are no examples for this in the template that I could find.
Sorry if this is a trivial question. This is my first big project with Vue and Typescript and its all slowly making sense, just trying to figure this part out is killing me 
Replies (7)
Pass Your IT Certification Exams With Real Braindumps Exam Dumps Questions and Answers with Guaranteed Success. Complete Online Certification Training Courses With PDF, Test Engine, and Video Tutorials For All Vendors. 100% Accurate & Updated Questions for passing IT Certifications at a low Price. Get real and valid exam dumps:
https://www.dumpscafe.com/allproducts.html
Our Canadian Investment Funds Course Exam Investments & Banking content is time-tested, examined and approved by the best industry professionals. Hence our IFSE Institute CIFC products are immensely popular in the market.
https://www.exact2pass.com/CIFC-pass.html
Hi Chris,
Could you please attach code on how you are passing data through props?
Props are the correct way how you can pass data into a child component. You can read more about prop usage in Vue official doc. https://vuejs.org/guide/components/props.html#props
Right now in the latest Metronic Vue version we are using Pinia state management instead of Vuex which is now new default state management for Vue applications. To easily share your data between components you can use Pinia or Vuex as well, you can check our Pania modules in src/stores/ folder.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris - I'll stick with Vuex since I already did a bunch of work there with integrating Amplify Auth into it, and dont want to start over.
I am running into a never ending loop when I pass data into the component.
I have 2 files BrandListing.vue and AddBrandModal.vue.
In BrandListing:
Pass selectedItem to the modal component:
<AddBrandModal :userData="selectedItem"></AddBrandModal>In Setup(), I assign
//declare my ref const
const selectedItem = ref<Brand>();
// @click event function when Update button is clicked
const updateItem = (id) => {
const item = tableData.value.find((obj) => {
return obj.id === id;
});
selectedItem.value = item;
const modal = new Modal(document.getElementById("kt_modal_add_brand"));
modal.show();
};In AddBrandModal.vue
Setup
export default defineComponent({
name: "add-brand-modal",
components: {},
props: ["userData"],and within the template I try to output 1 of the properties of userData object that was passed:
{{ userData.name }}
Here is the "Brand" type that is actually automatically created in API.ts by Amplify generator for my GraphQL API:
type Brand = {
__typename: "Brand";
id: string;
name: string;
notes?: string | null | undefined;
imageKey?: string | null | undefined;
Products?: ModelProductConnection | null | undefined;
createdAt: string;
updatedAt: string;
}When I load the page, I keep re-rendering it in a loop (the AddBrandModal is in a loop ). I do have a breakpoint via dev tools on both pages and can see it keeps breaking in the modal component over and over.
It cant be the value assignment causing it because it only gets called on click of the button.
Not sure if this will be clear for you to understand, but maybe you know of some condition that would cause this looping?
I think I figured out how to not make it loop:
props: {
userDataT: {
type: Object as PropType<Brand>,
required: false,
},
},I defined the props with a type. but even though I pass the value on click, it doesnt render the value.
I will keep messing around with it. I think I just need to learn more on how to do it properly ..
Never mind! - I got it now - I think I just needed some more time to figure it out. The last post where I define the type as
<brand>Thanks again!
Hi Chris,
Sorry for the late reply.
I am glad that you have already figurated this out. Let me know if you will need any additional help.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
