TypeError: Cannot read properties of undefined (reading ‘mData‘)

最新推荐文章于 2024-08-02 22:44:48 发布

郑小晨

最新推荐文章于 2024-08-02 22:44:48 发布

阅读量7.3k

点赞数

分类专栏：前端技术文章标签： jquery vue.js DataTable

本文链接：https://blog.csdn.net/u012835032/article/details/120738847

版权

前端技术专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文记录了一次前端开发中Vue.js与jQuery DataTables集成时遇到的问题，主要原因是thead中的列没有在tbody中正确显示，导致数据绑定时出现‘mData’ undefined的错误。通过调试和代码修复，揭示了thead的v-if条件导致tbody缺失列的问题。

摘要由CSDN通过智能技术生成

记录一个bug

前端框架用的是Vue.js，列表用的JQuery.DataTable

报错信息如下

vue@2.6.12:6 TypeError: Cannot read properties of undefined (reading 'mData')
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.n [as dataTable] (jquery.dataTables.min.js:83)
    at k.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166)
    at wn.<anonymous> (Index:1150)
    at Array.<anonymous> (vue@2.6.12:6)

这报错信息看得头晕。。。

不过可以点那个(jquery.dataTables.min.js:90)报错信息进去

然后点{}调整代码格式

然后调试，发现table的tbody列比thead多，然后c就undefined了（如下图）

然后就可以去我们自己的代码里面找了

table HTML如下

                        <table id="list" class="table table-bordered text-nowrap dataTableList2">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>@Resx.CMM.Unit</th>
                                    <th>@Resx.CMM.PositionName</th>
                                    <th>@Resx.CMM.EmployeeNo</th>
                                    <th>@Resx.CMM.EmployeeName</th>

                                    <th>@Resx.CMM.InjuryCaseNo</th>
                                    <th v-if="IsHRIS">@Resx.CMM.PeriodicalPayment</th>
                                    <th v-if="IsHRIS">@Html.Raw(@Resx.CMM.PermenantInjury)</th>
                                    <th v-if="IsHRIS">@Resx.CMM.MedicalClaim</th>
                                    <th v-if="IsHRIS">@Html.Raw(@Resx.CMM.Reimbursement)</th>
                                    <th>@Resx.CMM.LegalCase</th>

                                    <th>@Resx.CMM.InjuryNature</th>
                                    <th>@Resx.CMM.InjuryPart</th>
                                    <th>@Resx.CMM.InjuryReason</th>
                                    <th>@Resx.CMM.DateOfInjury</th>
                                    <th>@Resx.CMM.RegistraionDate</th>
                                    <th>@Resx.CMM.Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in detail.CMMRecords" :key="item.CMMId">
                                    <td><a class="btn btn-primary" @@click="Edit(item.CMMId)"><i style="color:white" class="fas faBtn fa-edit"></i> </a></td>
                                    <td>{{item.UnitDisplayName}}</td>
                                    <td>{{item.PositionDisplayName}}</td>
                                    <td>{{item.p_empno}}</td>
                                    <td>{{item.EmployeeName}}</td>

                                    <td>{{item.InjuryCaseNo}}</td>
                                    <td>{{item.PeriodicalPayment}}</td>
                                    <td>{{item.PermIncapAmt}}</td>
                                    <td>{{item.MedicalClaim}}</td>
                                    <td>{{item.ReimbursementAmt}}</td>
                                    <td>{{item.LegalCase}}</td>

                                    <td>{{item.InjuryNature}}</td>
                                    <td>{{item.InjuryPart}}</td>
                                    <td>{{item.InjuryReason}}</td>
                                    <td>{{DateFormat(item.InjuryDate)}}</td>
                                    <td>{{DateFormat(item.RegisterDate)}}</td>
                                    <td>{{item.StatusName}}</td>
                                </tr>
                            </tbody>
                        </table>