Vue.js 在渲染组件上调用函数

Posted 2023-02-23

【中文标题】Vue.js 在渲染组件上调用函数

【英文标题】：Vue.js Calling function on a rendered component

【发布时间】：2016-08-17 00:20:40

【问题描述】：

我想使用 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 函数来保存新状态？

提前致谢！

Screenshot of the scrumboard

【问题讨论】：

使用的主要技术是使用this.$el 从组件内应用.sortable。然后，您可以在 .sortable 调用外部使用 var self = this; 并在调用内部使用 self 捕获对组件的引用。从那里，您可以使用 ui 中的信息来确定要调用哪个组件的 updateStatus() 以及如何正确地重新排列内部数组以匹配 DOM。

【参考方案1】：

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

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

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

所以我制作了 3 个组件： - scrumboard > 将 scrumboardColumn 作为组件 - scrumboardColumn > 以票据为组件 - 门票

vue 根实例也会加载工单组件，因为工单组件也用于积压页面。

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

希望这对未来的人有所帮助！