[Предупреждение Vue]: ошибка рендеринга: ошибка «TypeError: невозможно прочитать свойства неопределенного (чтение« длины »)» при использовании таблиц данных в vue

В моем приложении laravel vuejs у меня есть следующий vue для отображения некоторых данных внутри datatable .

Для лучшего взаимодействия с пользователем я добавил параметр «Показать больше» для загрузки данных.

<show-more :data-size="documents.length" increment-amount="5" >
            <div  slot-scope="{ showMore, showAmount }">

                <div v-bind:class = "selectedForAction.count() === 0 ? 'h-15' : ''">
                    <action-bar :count="selectedForAction.count()">

                        <div slot="table-header" class="flex items-center justify-between  bg-white border-certstyle-border border-b rounded-t py-4 px-10 w-full ">

                            <!--Course -->
                            <div class="flex items-center rounded-full w-22 overflow-hidden shadow-soft">
                                <selectable-all item="selectAll" :data="documents" @select="selectAll"></selectable-all>
                            </div>

                            <div class="flex flex-col items-left text-left w-10/12">
                                Document
                            </div>

                            <div class="w-74 text-left"  item="validFor">
                                Valid until
                            </div>

                            <div class="w-1/12 text-center" item="status">
                                Validity
                            </div>
                            <div class="px-8 w-32">
                            </div>
                            <div class="px-8">
                            </div>
                        </div>
                        <button v-if="selectedForAction.count() === 1" @click="editSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
                            <span class="mr-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                            </span>
                            <span class="font-bold">Edit</span>
                        </button>
                        <button @click="removeSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
                            <span class="mr-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
                            </span>
                            <span class="font-bold">Remove</span>
                        </button>
                    </action-bar>
                </div>

                <!--Certificates-->
                <div v-if="documents[index] !== undefined"  v-for="(i, index) in showAmount" class="flex items-center justify-between  border-certstyle-border border-b px-10 py-1 hover:bg-certstyle-background-light transition-colors duration-150">

                    <!--Certificate institute image-->
                    <div class="flex items-center " item="certificatedChecked" >
                        <div class="relative">
                            <div class="rounded-full h-14 w-10 overflow-hidden shadow-soft pt-4">
                                <selectable
                                    v-model="selectedForAction"
                                    :item="documents[index].id"
                                    :ref="documents[index].id"
                                ></selectable>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col items-left text-left w-10/12" item="certificate">
                        <span :title="documents[index].name" style="cursor: help;" class="text-certstyle-titles font-bold cursor-help">{{ documents[index].name }}</span>
                    </div>

                    <!--Certificate due date-->
                    <div  class="w-74 text-left" item="validFor">
                        <p class="text-sm valid-until not-applicable" v-if="documents[index].is_valid_forever">{{ 'Indefinite'}}</p>
                        <p class="text-sm valid-until" v-else>{{ documents[index].expires_at_formatted }}</p>
                    </div>

                    <!-- Certificate status-->
                    <div class="w-48 text-center" item="status">
                        <status :status="documents[index].validity_status.toLowerCase()"></status>
                    </div>

                    <!--Download icon-->
                    <div  class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="download">
                        <a v-if="documents[index].url !== null" :href="getDocumentDownloadLocation(documents[index].id)" class="text-certstyle-text-light">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                        </a>
                    </div>

                    <!--Preview icon-->
                    <div  class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="view">
                        <a v-if="documents[index].url !== null" target="_blank" :href="getDocumentPreviewLocation(documents[index].id)" class="text-certstyle-text-light">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                        </a>
                    </div>

                    <div class="w-0 flex justify-end">
                        <edit-documents-modal :document="documents[index]" :identifier="`editDocument${documents[index].id}`"></edit-documents-modal>
                    </div>
                </div>

                <div class="relative flex items-center justify-center">
                    <!--Show more button-->
                    <button class="absolute border focus:outline-none hover:bg-certstyle-orange bg-white border-certstyle-orange hover:text-white text-certstyle-orange font-bold text-sm rounded px-4 py-1 mt-32 " v-if="showAmount < documents.length" @click="showMore">
                        show more documents
                    </button>
                </div>

            </div>

        </show-more>

Теперь проблема в том, что когда я пытался запустить это, я получаю следующую ошибку консоли, и моя таблица данных не отображается. Даже заголовков нет...

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

Проверьте, есть ли у documents данные или нет? В соответствии с ошибкой он говорит, что document не определено.

Rohìt Jíndal 09.04.2022 08:42
documents, вероятно, не определен в некоторых моментах, возможно, это асинхронный вызов, который не разрешен, пока шаблон пытается выполнить итерацию по нему. Вы можете попробовать documents && documents.length в качестве перепроверки.
kissu 09.04.2022 13:30
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
2
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Лучше использовать свойство computed для обработки таких ситуаций.

computed: {
 getDocumentSize() {
  return this.documents ? this.documents.length : 0;
 }
}

и в шаблоне сделайте следующее изменение

<show-more :data-size="getDocumentSize" increment-amount="5" >
....

Другие вопросы по теме