[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" error when using datatables in vue
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" error when using datatables in 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>
现在的问题是，当我尝试 运行 时，出现以下控制台错误并且我的数据 table 没有显示。甚至 headers...
[Vue warn]: Error in render: "TypeError: Cannot read properties of
undefined (reading 'length')"
最好用computed 属性来处理这些情况
computed: {
getDocumentSize() {
return this.documents ? this.documents.length : 0;
}
}
并在模板中进行以下更改
<show-more :data-size="getDocumentSize" increment-amount="5" >
....
在我的 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>
现在的问题是，当我尝试 运行 时，出现以下控制台错误并且我的数据 table 没有显示。甚至 headers...
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"
最好用computed 属性来处理这些情况
computed: {
getDocumentSize() {
return this.documents ? this.documents.length : 0;
}
}
并在模板中进行以下更改
<show-more :data-size="getDocumentSize" increment-amount="5" >
....