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>

到目前为止一切正常，现在我的问题是：如何动态调用＆＃34; updateStatus（）＆＃34;将故障单放入另一个列表后，在故障单组件上运行吗？

正如您所看到的，我可以将特定元素删除，并将可排序列表放入其中。通过抓取包装器的data-status属性，我知道新的状态是什么+我知道丢弃了哪个元素。

但是如何获取相关票证组件的实例并调用updateStatus函数来保存新状态？

提前致谢！

Screenshot of the scrumboard

Answer 1

感谢大卫指出我正确的方向。我的问题的解决方案是正确的组件嵌套。

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

这样我最终只宣告“”并且魔术发生了：D。

所以我做了3个组件： - scrumboard＆gt;将scrumboardColumn作为组件 - scrumboardColumn＆gt;将票作为组件 - 票

root vue实例还会加载票证组件，因为票证组件也在待办事项页面上使用。

我还没有完全完成最终产品，但我通过在scrumboardColumn组件的ready函数中调用它来完成排序，就像David建议的那样。

希望这可以帮助将来的某个人！

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

1 个答案: