Vue.js 在渲染組件上調用函數

Question

我想使用 Laravel 和 Vue.js 創建一個交互式 Scrumboard，其中包含多個列，並在這些列中包含多個票證。

這些票是 vue 組件，具有一些不錯的編輯/刪除/（取消）分配開發人員功能，也用於其他頁面。

我有多個這樣定義的列：

        <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>

正如你所看到的，它為它為每一列找到的每張票呈現一個票證組件。

不，我已將 scrumboard__tickets_wrapper div 轉換為 jquery ui 可排序列表，它允許您在列之間交換票證。

<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>

到目前為止一切正常，現在我的問題是：一旦票被放入另一個列表中，我如何在票組件上動態調用“updateStatus()”函數？

如您所見，我可以獲取被刪除的特定元素以及它被放入的可排序列表。 所以我通過獲取包裝器的 data-status 屬性知道新狀態是什么+我知道哪個元素被刪除了。

但是如何獲取有問題的工單組件的實例並調用 updateStatus 函數來保存新狀態？

提前致謝！

Scrumboard 的屏幕截圖

Answer 1

感謝大衛為我指明了正確的方向。 我的問題的解決方案是正確的組件嵌套。

解決方案是創建 3 個具有適當子組件繼承的組件。 並在其父組件的模板中聲明子組件。

這樣我最終只聲明了 "" 並且魔法發生了：D。

所以我制作了 3 個組件： - scrumboard > 將 scrumboardColumn 作為組件 - scrumboardColumn > 將票證作為組件 - 票證

根 vue 實例還加載了工單組件，因為工單組件也用於 backlog 頁面。

我還沒有完全完成最終產品，但我通過像 David 建議的那樣從 scrumboardColumn 組件的就緒函數中調用它來獲得可排序的工作。

希望這對未來的人有所幫助！