在VUEJS 3应用中错误的情况下，如何获取更多信息？

Question

在Vuejs 3应用程序中，在更改服务器脚本后，我会出现错误

app.js:30792 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

，在我的控制台中，我看到了： https://prnt.sc/tdeypqlyzioy

单击这些链接，很难获得善良的错误/错误/实际上我不得不发表评论 代码块以发现该错误是由

{{ todo.user.id }}

SI LINE触发的，我必须用

{{todo.creator_username}}

更新它，以反映我的服务器脚本更改。

我的Chrome上安装了Vue DevTools，但我找不到它是否提供了一些添加信息 帮助解决这个问题。

是否有一些有关此类调试/获取更多信息的工具？

页面来源：

<template>

    <div class="flex justify-center w-full d1">
        <div class="block p-6 rounded-lg shadow-lg bg-white max-w-lg">
            <h5 class="text-gray-900 text-xl leading-tight font-medium mb-2">
                {{ todo.id }}=>{{ todo.status }}=>{{ todo.name }}
            </h5>
            <h5 class="text-gray-900 text-sm leading-tight font-medium mb-2">
                By {{ todo.user_id }}=>
                {{ todo.creator_username }} on
                {{ todo.created_at_formatted }}, <strong>{{ todo.status_label }}</strong>
            </h5>
            <h5 class="text-gray-900 text-sm leading-tight font-medium mb-2">
                <strong>{{ todo.uncompleted_todo_tasks_count }} uncompleted task{{pluralize(todo.uncompleted_todo_tasks_count, '', 's') }}</strong> from {{ todo.todo_tasks_count }}
            </h5>
            <p class="text-gray-700 text-base mb-4" v-html="todo.description">
            </p>

            <div class="flex justify-center">
                <div class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
                    <template v-for="(nextTodoTask, index) in todo.todoTasks" :key="nextTodoTask.id">

                        <div class="flex justify-center">
                            <ul class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
                                <li
                                    v-if="nextTodoTask.status === 'D'"
                                    class="px-6 py-2 border-b border-gray-200 w-full bg-gray-200 rounded-t-lg text-gray-400 cursor-default"
                                >
                                    <p class="text-gray-700 text-base mb-4">
                                        <i :class="getHeaderIcon('info')" :title="nextTodoTask.description"
                                           class="action_icon icon_right_text_margin"></i>
                                        {{ nextTodoTask.name }}
                                    </p>

                                    <p class="text-gray-700 text-base mb-4">
                                        <strong>{{ getDictionaryLabel(nextTodoTask.status, settingsTodoTaskStatusLabels ) }}</strong>, created at {{
                                            nextTodoTask.created_at_formatted
                                        }}
                                    </p>
                                </li>

                                <li
                                    v-if="nextTodoTask.status === 'C'"
                                    class="px-6 py-2 border-b border-gray-200 w-full bg-blue-200 text-white">
                                    <p class="text-gray-700 text-base mb-4">
                                        <i :class="getHeaderIcon('info')" :title="nextTodoTask.description"
                                           class="action_icon icon_right_text_margin"></i>
                                        {{ nextTodoTask.name }}
                                    </p>

                                    <p class="text-gray-700 text-base mb-4">
                                        <strong>{{ nextTodoTask.status_label }}</strong>, created at {{
                                            nextTodoTask.created_at_formatted
                                        }}
                                    </p>

                                    <JetSecondaryButton @click="uncompleteTodoTask(todo.id, nextTodoTask.id, index)">
                                        Uncomplete
                                    </JetSecondaryButton>
                                    <JetSecondaryButton @click="disableTodoTask(todo.id, nextTodoTask.id, index)" class="ml-4">
                                        Disable
                                    </JetSecondaryButton>
                                    <div v-show="is_data_loading" class="ml-2 form_processing"></div>
                                </li>

                                <li
                                    v-if="nextTodoTask.status === 'U'"
                                    class="px-6 py-2 border-b border-gray-200 w-full bg-blue-200 text-white">
                                    <p class="text-gray-700 text-base mb-4">
                                        <i :class="getHeaderIcon('info')" :title="nextTodoTask.description"
                                           class="action_icon icon_right_text_margin"></i>
                                        {{ nextTodoTask.name }}
                                    </p>

                                    <p class="text-gray-700 text-base mb-4">
                                        <strong>{{ nextTodoTask.status_label }}</strong>, created at {{
                                            nextTodoTask.created_at_formatted
                                        }}
                                    </p>

                                    <JetSecondaryButton @click="uncompleteTodoTask(todo.id, nextTodoTask.id, index)">
                                        Uncomplete
                                    </JetSecondaryButton>
                                    <JetSecondaryButton @click="disableTodoTask(todo.id, nextTodoTask.id, index)" class="ml-4">
                                        Disable
                                    </JetSecondaryButton>
                                    <div v-show="is_data_loading" class="ml-2 form_processing"></div>
                                </li>

                                <li
                                    v-if="nextTodoTask.status === 'A'"
                                    class="px-6 py-2 border-b border-gray-200 w-full">
                                    <p class="text-gray-700 text-base mb-4">
                                        <i :class="getHeaderIcon('info')" :title="nextTodoTask.description"
                                           class="action_icon icon_right_text_margin"></i>
                                        {{ nextTodoTask.name }}<br>

                                    </p>

                                    <p class="text-gray-700 text-base mb-4">
                                        <strong>{{ nextTodoTask.status_label }}</strong>, created at {{
                                            nextTodoTask.created_at_formatted
                                        }}
                                    </p>

                                    <p class="text-gray-700 text-base mb-4" v-if="nextTodoTask.is_task_expired">
                                        <i :class="getHeaderIcon('error')"
                                           title="You can not make any operations on this task"
                                           class="action_icon icon_right_text_margin"></i>
                                        Task is expired
                                    </p>
                                    <p class="text-gray-700 text-base mb-4" v-if="!nextTodoTask.is_task_expired">
                                        Deadline at {{ nextTodoTask.deadline_formatted }}
                                    </p>

                                    <JetButton @click="completeTodoTask(todo.id, nextTodoTask.id, index)"
                                               :class="{ 'opacity-25': is_data_loading }" :disabled="is_data_loading"
                                               v-if="!nextTodoTask.is_task_expired">
                                        Complete
                                    </JetButton>
                                    <JetSecondaryButton @click="disableTodoTask(todo.id, nextTodoTask.id, index)"
                                                        class="ml-4">
                                        Disable
                                    </JetSecondaryButton>

                                </li>
                            </ul>
                        </div>

                    </template>

                </div>
            </div>


        </div>
    </div>

</template>

谢谢！