Vuejsに子コンポーネントがあります。InvGroupに基づいてフィルタリングしているオブジェクトのリストがあります。アコーディオン形式を作成しようとすると問題が発生します。、タグを使用してアコーディオンコンテンツを囲んでみましたが、どれも機能しません。解決策を提案してください。
<div id="accordion" class="div-shadow col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div v-for="invGroup in invGroupTotals">
<label>{{invGroup.Group}}<span style="float:right;" v-if="invGroup.DiffTotal === 0" class="text-success"> No Difference </span><span class="text-danger" style="float:right;" v-else>Diffrence Count {{invGroup.DiffTotal}} , Amount ${{invGroup.DiffAmtTotal}}</span></label>
<div style="text-align: center; background-color: white;height:400px;overflow-y:scroll;" >
<table cellpadding="10" style="border-style: solid; border-color: Gray; border-collapse: separate;border-spacing: 2px" class="table tableStyle col-md-12 col-lg-12 col-sm-12 col-xs-12">
<tr>
<th v-for="column in weeklyReconcileGridColumns">{{column}}</th>
</tr>
<template v-for="item in weeklyReconcileList">
<tr v-if="invGroup.Group === item.UPCGroup">
<td >{{item.UPCID}}</td>
<td class="text-left" v-on:click="showItemHistory(item.UPCID, item.UPCDesc)"><a href="#">{{item.UPCDesc}}</a></td>
<td >{{item.SystemBOH}}</td>
<td >{{item.CurrentWeekBOH}}</td>
<td >{{item.Diffrence}}</td>
<td >{{item.TotalSalesAmount}}</td>
</tr>
</div>
<tr>
<td class="text-center" colspan="2"> Total</td>
<td> {{invGroup.SysTotal}}</td>
<td> {{invGroup.CountedTotal}}</td>
<td> {{invGroup.DiffTotal}}</td>
<td> {{invGroup.DiffAmtTotal}}</td>
</tr
</table>
</div>
更新されたメソッドにjqueryを追加しました。
updated: function () {
$("#accordion").accordion();
}
問題は、ループするタグをHTMLタグで囲まないようにすることです。
divタグの代わりにテンプレートタグを使用してみてください
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加