Vue.js在呈现的组件上调用函数

Question

我想创建一个交互式的滚动板使用Laravel和Vue.js包含多个列，并在这些列中多张票。

这些票证是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>

如您所见，它为它为每列找到的每个票证呈现一个票证组件。

不，我已经将jquery div转换为scrumboard__tickets_wrapper 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函数来保存新状态呢？

提前感谢！

Screenshot of the scrumboard

Answer 1

感谢David为我指明了正确的方向。我的问题的解决方案是适当的组件嵌套。

解决方案是创建3个具有适当的子组件继承的组件。并在其父组件的模板内声明该子组件。

这样，我最终只声明了"“，神奇的事情就发生了:D。

所以我做了3个组件：- scrumboardColumn >以工单为组件- scrumboard >以票证为组件-工单

根vue实例还加载ticket组件，因为在backlog页面上也使用了ticket组件。

我还没有完全完成最终产品，但我像大卫建议的那样，通过从scrumboardColumn组件的ready函数中调用可排序的方法，使其正常工作。

希望这对将来有帮助的人！