Vue.js 如何强制嵌套组件重新渲染

你好，这是我的两个对象

包含列的TaskTable对象

 <template>
        <ul class="tasks-columns" id="tasks-columns">

            <li class="col-sm-4 col-lg-2 task-column-wrapper list-unstyled" v-for="status in statuses" :id="status">
                <draggable :emptyInsertThreshold="10" @add="endDrag" ghost-class="ghost" group="tasks">
                        <task v-for="task in tasks[status]" :task="task" :key="task.id"></task>
                </draggable>
            </li>

        </ul>
</template>

<script>
import draggable from 'vuedraggable'

export default {
    data: function () {
        return {
            statuses: [],
            users: [],
            tasks: []
        }
    },
    components: {
        draggable
    },
    mounted() {
        this.loadStatuses();
        this.loadTasks();
        this.loadUsers();
    },
    methods: {
        loadStatuses: function () {
            axios.get('/api/tasks/get-statuses')
                .then((response) => {
                    this.statuses = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        loadUsers: function () {
            axios.get('/api/users')
                .then((response) => {
                    this.users = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

        loadTasks: function () {
            axios.get('/api/tasks/tasks-for-table')
                .then((response) => {
                    this.tasks = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        endDrag: function (event) {
            let column = event.to.parentElement.parentElement
            $.ajax({
                url: '/tasks/change-status',
                type: 'POST',
                data: {'task_id': event.item.id, 'status': column.id},
                success: function (data) {
                    if (data.success) {
                        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", // `top` or `bottom`
                            position: "center", // `left`, `center` or `right`
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                            stopOnFocus: true, // Prevents dismissing of toast on hover
                            onClick: function () {
                            } // Callback after click
                        }).showToast();

                    }
                }
            });
        }


    }
}
</script>

<template>


                <div class="task-wrapper" style="padding: 10%" :id="task.id">
                    <div class="task" >
                        <section style="margin-bottom: 1rem;">
                            <label>
                                {{ task.title }}
                            </label>
                        </section>
                        <section style="margin-bottom: 0.5rem;" class="task-table-task-status">
                                    <span style="padding-right: 5px;" data-toggle="tooltip" data-placement="right"
                                          title="Status">
                                        {{ task.status }}
                                    </span>
                        </section>
                        <section>
                    <span style="padding-right: 5px;" data-toggle="tooltip" data-placement="right"
                          title="Estimate">{{ task.estimate }}</span>

                            <div v-if="task.id" class="float-right">
                                <a class="c-header-nav-link" data-toggle="tooltip" data-placement="bottom"
                                   title="Assignee">
                                    <div class="c-avatar" style="width: 25px; height: 25px">
                                        <img class="c-avatar-img" :src="'/uploads/avatars/'+task.user.avatar">
                                    </div>
                                </a>
                            </div>
                        </section>
                    </div>
                </div>

</template>

<script>

export default {
    props: ['task'],
    data: function () {
        return {}
    },
    components: {
        draggable
    },
    mounted() {
        this.loadTask();
    },
    methods: {
        loadTask: function () {

        },
        reloadTask: function () {
            console.log('test');
        }

    }
}
</script>

从“vuedraggable”导入可拖动
导出默认值{
数据：函数（）{
返回{
状态：[]，
用户：[]，
任务：[]
}
},
组成部分：{
拖动
},
安装的（）{
这是loadstatus（）；
这是loadTasks（）；
这是loadUsers（）；
},
方法：{
加载状态：函数（）{
axios.get（“/api/tasks/get status”）
。然后（（响应）=>{
this.status=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
},
loadUsers:函数（）{
获取（'/api/users'））
。然后（（响应）=>{
this.users=response.data.data；
})
.catch（函数（错误）{
console.log（错误）；
});
},
loadTasks:函数（）{
get（'/api/tasks/tasks for table'）
。然后（（响应）=>{
this.tasks=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
},
endDrag:函数（事件）{
让column=event.to.parentElement.parentElement
$.ajax({
url:“/tasks/change status”，
键入：“POST”，
数据：{'task_id'：event.item.id，'status'：column.id}，
成功：功能（数据）{
if（data.success）{
烤面包({
文本：“任务状态已成功更新！”，
时长：3000，
目标：base_url++'/tasks'++“show/“+event.item.id，
是的，
接近：是的，
className:“自定义吐司”，
重力：“顶部”、“顶部”或“底部”`
位置：“居中”、“左”、“中”或“右”`
背景色：“线性渐变（向右，#00b09b，#96c93d）”，
stopOnFocus:true，//防止在悬停时解除toast
onClick:function（）{
}//单击后回调
}).showtoos（）；
}
}
});
}
}
}

以及表示列的每个单元格的Task对象

 <template>
        <ul class="tasks-columns" id="tasks-columns">

            <li class="col-sm-4 col-lg-2 task-column-wrapper list-unstyled" v-for="status in statuses" :id="status">
                <draggable :emptyInsertThreshold="10" @add="endDrag" ghost-class="ghost" group="tasks">
                        <task v-for="task in tasks[status]" :task="task" :key="task.id"></task>
                </draggable>
            </li>

        </ul>
</template>

<script>
import draggable from 'vuedraggable'

export default {
    data: function () {
        return {
            statuses: [],
            users: [],
            tasks: []
        }
    },
    components: {
        draggable
    },
    mounted() {
        this.loadStatuses();
        this.loadTasks();
        this.loadUsers();
    },
    methods: {
        loadStatuses: function () {
            axios.get('/api/tasks/get-statuses')
                .then((response) => {
                    this.statuses = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        loadUsers: function () {
            axios.get('/api/users')
                .then((response) => {
                    this.users = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

        loadTasks: function () {
            axios.get('/api/tasks/tasks-for-table')
                .then((response) => {
                    this.tasks = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        endDrag: function (event) {
            let column = event.to.parentElement.parentElement
            $.ajax({
                url: '/tasks/change-status',
                type: 'POST',
                data: {'task_id': event.item.id, 'status': column.id},
                success: function (data) {
                    if (data.success) {
                        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", // `top` or `bottom`
                            position: "center", // `left`, `center` or `right`
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                            stopOnFocus: true, // Prevents dismissing of toast on hover
                            onClick: function () {
                            } // Callback after click
                        }).showToast();

                    }
                }
            });
        }


    }
}
</script>

<template>


                <div class="task-wrapper" style="padding: 10%" :id="task.id">
                    <div class="task" >
                        <section style="margin-bottom: 1rem;">
                            <label>
                                {{ task.title }}
                            </label>
                        </section>
                        <section style="margin-bottom: 0.5rem;" class="task-table-task-status">
                                    <span style="padding-right: 5px;" data-toggle="tooltip" data-placement="right"
                                          title="Status">
                                        {{ task.status }}
                                    </span>
                        </section>
                        <section>
                    <span style="padding-right: 5px;" data-toggle="tooltip" data-placement="right"
                          title="Estimate">{{ task.estimate }}</span>

                            <div v-if="task.id" class="float-right">
                                <a class="c-header-nav-link" data-toggle="tooltip" data-placement="bottom"
                                   title="Assignee">
                                    <div class="c-avatar" style="width: 25px; height: 25px">
                                        <img class="c-avatar-img" :src="'/uploads/avatars/'+task.user.avatar">
                                    </div>
                                </a>
                            </div>
                        </section>
                    </div>
                </div>

</template>

<script>

export default {
    props: ['task'],
    data: function () {
        return {}
    },
    components: {
        draggable
    },
    mounted() {
        this.loadTask();
    },
    methods: {
        loadTask: function () {

        },
        reloadTask: function () {
            console.log('test');
        }

    }
}
</script>

{{task.title}}
{{task.status}
{{task.estimate}}
导出默认值{
道具：['task']，
数据：函数（）{
返回{}
},
组成部分：{
拖动
},
安装的（）{
这是loadTask（）；
},
方法：{
loadTask:函数（）{
},
重载任务：函数（）{
console.log（'test'）；
}
}
}

---

因此，当前它们是可拖动的，列之间的拖动是调用一个端点来更新任务状态，但是在UI中任务状态是旧的，我想强制更新已移动的任务对象。知道怎么做吗？

前端部件（vue内部）没有任何更新 您需要这样做：

endDrag: function (event) {
        let column = event.to.parentElement.parentElement
        $.ajax({
            url: '/tasks/change-status',
            type: 'POST',
            data: {'task_id': event.item.id, 'status': column.id},
            success: function (data) {
                if (data.success) {

                    const task = this.tasks.find(t => t.id === event.item.id);
                    task.status = column.id;

                    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", // `top` or `bottom`
                        position: "center", // `left`, `center` or `right`
                        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                        stopOnFocus: true, // Prevents dismissing of toast on hover
                        onClick: function () {
                        } // Callback after click
                    }).showToast();

                }
            }
        });
    }

因此，请查找要更新的任务：

const task = this.tasks.find(t => t.id === event.item.id);

并用您的状态更新它

task.status = column.id;

---

您好，在Vue中重新渲染组件的最佳方法是在要重新渲染的组件上使用

：键

，并在需要再次渲染组件时更改键的值。