Vue.js Calling function on a rendered component

Question

I want to create an interactive scrumboard using Laravel and Vue.js containing multiple columns and within those columns multiple tickets.

These tickets are vue components with some nice edit / delete / (un)assign developer functionality and is used on other pages as well.

I have multiple columns defined like this:

        <div id="scrumboard">
            <div class="scrumboard__column">
                <div class="scrumboard__title">Open</div>
                <div class="scrumboard__tickets_wrapper" data-status="open">
                    @if( $sprint->hasTicketsOfStatus("open") )
                        @foreach( $sprint->getTicketsByStatus("open") as $ticket )
                            <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="scrumboard__column">
                <div class="scrumboard__title">In progress</div>
                <div class="scrumboard__tickets_wrapper" data-status="progress">
                    @if( $sprint->hasTicketsOfStatus("progress") )
                        @foreach( $sprint->getTicketsByStatus("progress") as $ticket )
                            <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="scrumboard__column">
                <div class="scrumboard__title">Finished</div>
                <div class="scrumboard__tickets_wrapper" data-status="closed">
                    @if( $sprint->hasTicketsOfStatus("closed") )
                        @foreach( $sprint->getTicketsByStatus("closed") as $ticket )
                            <ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

And as you can see it renders a ticket component for each ticket it finds for each column.

No i have turned the scrumboard__tickets_wrapper div's into jquery ui sortable lists which allows you to swap the tickets between columns.

<script>
    $(document).ready(function(){

        $(".scrumboard__tickets_wrapper").sortable({
            connectWith: '.scrumboard__tickets_wrapper',
            receive: function(event, ui){
                console.log("Switched columns");
                console.log(event);
                console.log(ui);
                var target = $(event.target);
                target.css("background-color", "#ff0000");
            }
        });
</script>

Everything is working so far, now my question is: how do I dynamically call the "updateStatus()" function on a ticket component once the ticket is dropped into another list?

As you can see I can get the specific element being dropped and the sortable list it's been dropped into. So I know what the new status is by grabbing the data-status property of the wrapper + I know which element was dropped.

But how do I grab the instance of the ticket component in question and call the updateStatus function to save the new status?

Thanks in advance!

Screenshot of the scrumboard

Answer 1

Thanks David for pointing me in the right direction. The solution to my problem was proper component nesting.

The solution was to create 3 components with proper child-component inheritence. And declaring the child-components within the template of it's parent.

This way I end up only declaring "" and the magic happens :D.

So I have made 3 components: - scrumboard > takes scrumboardColumn as component - scrumboardColumn > takes ticket as component - ticket

The root vue instance also loads the ticket component since the ticket component is also used on the backlog page.

I haven't completely finished the final product but I got the sortable working by calling it from within the ready function of the scrumboardColumn component like David suggested.

Hope this helps someone in the future!