Send object to component in modal

Hi, I’m new to Vue - using Vue 3.

I’m trying to build a form-builder and in my main component I have data: {elements: []}

Each element is just an object.

I have this, which renders each element:

<form-element v-for="element in elements"
        :key="element"
        :name="element.name"
        :type="element.type"
        :label="element.label"

        @edit="editElement(element)"
        @remove="removeElement(element)"
      ></form-element>

The component has an edit button, which when clicked triggers the edit event. As you can see, I listen for that here and call editElement method and pass it the element to be edited.

In my editElement method, I then want to “send” my element to a different component, which is in a modal. This component is the component.

I’m at a loss for how to access the modal component and pass it my element.

I may be going at this completely against best practices, if so, please enlighten me!

Thanks in advance

My suggestion would be to have your elements data in a vuex store.
This way you can edit and access the data reactive from anywhere.

An alternative approach would be for the parent component to ´provide´ access to the data with a reactive object or a function and then ´inject´ it in the child components (modal and form). But this seems to be to only complicate things more than necessary. (See ´provide/inject´ in documentation )

Hello @pelatho did you tried already with index?

<form-element v-for=“(element, index) in elements"
        :key=“index”
        :name="element.name"
        :type="element.type"
        :label="element.label"

        @edit="editElement(element)"
        @remove="removeElement(element)"
      ></form-element>

When then on your methods, you have something for example :

editElement(value){
console.log(value);
}

This is what you need?