CODEWITHSUNDEEP
vue.jsbootstrap-vue
caro
caro

Reputation: 892

unable to access child component $refs inside b-modal

I am attempting to access a child component's $refs inside a b-modal.

On page load, I can see with vue dev tools that "agent-edit" has not been created. If I put the component outside of b-modal, it does show and I can access it -- however I need this to load inside a modal. How can I access $refs.editAgent? Can I force this child component to load with the page? 

<b-modal id="editModal" ref="editModal" title="Edit Agent" size="lg">
    <agent-edit ref="editAgent"></agent-edit>
    <div slot="modal-footer" class="w-100"></div>
</b-modal>

Upvotes: 4

Views: 5960

Answers (3)

Matheus Valenza
Matheus Valenza

Reputation: 919

In your case, this.$refs.editModal.$refs.editAgent should work.

But pay attemption to the use of $refs and think about emitting events.

Upvotes: 0

Troy Morehouse
Troy Morehouse

Reputation: 5435

Refs are relative to the component they are created in (not the child components)

// use this
this.$refs.editAgent

// Not this
this.$refs.editModal.$refs.editAgent

Note that b-modal is lazy by default, meaning the content is not rendered (instantiated) in the document until the modal is shown.

Once the modal is finished opening, you should have access to the refs (they don't exist until they are rendered into the DOM)

Listen for the modal's shown event, and then access the refs once that event is emitted.

Upvotes: 3

Reynicke
Reynicke

Reputation: 1560

I guess, that there is no <agent-edit> inside <b-modal>, when you try to call the method.

When the modal is hidden, there is no need to render the child components. Try to first show the modal and then access its children (maybe even with a Vue.$nextTick to make sure everything is finished).

Upvotes: 1

Related Questions