Vue使用vuedraggable拖拽后如何强制嵌套Task组件重新渲染？

问题根因 #

你当前只更新了后端的任务状态，前端本地tasks数组中对应任务的status属性并未修改，Vue是响应式驱动UI，数据源没有变化的情况下，Task组件自然会展示旧值。

解决方法 #

方案1：同步本地数据源（最优推荐） #

拖拽接口调用成功后，直接更新本地tasks中的对应任务数据，或者重新拉取全量任务数据，保证前后端数据一致，UI会自动刷新。
修改TaskTable的endDrag方法如下：

endDrag: function (event) {
    const that = this
    const taskId = parseInt(event.item.id)
    let column = event.to.parentElement.parentElement
    const newStatus = column.id
    $.ajax({
        url: '/tasks/change-status',
        type: 'POST',
        data: {'task_id': taskId, 'status': newStatus},
        success: function (data) {
            if (data.success) {
                // 方法1：直接修改本地对应任务的status，响应式更新UI
                // 遍历所有状态下的任务，找到对应id的任务修改状态
                for (let status in that.tasks) {
                    const taskIndex = that.tasks[status].findIndex(t => t.id === taskId)
                    if (taskIndex > -1) {
                        that.tasks[status][taskIndex].status = newStatus
                        break
                    }
                }
                // 方法2：更稳妥，直接重新拉取最新任务列表，完全同步后端
                // that.loadTasks()
                
                Toastify({
                    text: "Task status has been successfully updated!",
                    duration: 3000,
                    destination: base_url + '/tasks' + "show/" +  event.item.id,
                    newWindow: true,
                    close: true,
                    className: 'custom-toast',
                    gravity: "top",
                    position: "center",
                    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                    stopOnFocus: true,
                    onClick: function () {}
                }).showToast();
            }
        }
    });
}

方案2：强制重新渲染Task组件（可选） #

如果不想修改数据源，也可以通过修改组件key的方式让Vue销毁旧组件、重新创建新组件实现刷新：
修改TaskTable模板中Task组件的key属性，拼接任务状态：

<task v-for="task in tasks[status]" :task="task" :key="`${task.id}-${task.status}`"></task>

只要任务状态变化，key就会变化，Vue会自动重新渲染该Task组件，加载最新数据。

额外优化点 #

你当前的Task组件中注册了draggable组件但没有实际使用，可以直接移除这部分冗余代码。

内容的提问来源于stack exchange，提问作者Kaloyan Nikolov