Question

我在动态创建手风琴时有要求。我有一个列表用于，我将过滤记录并根据选定的日期创建手风琴。以下是手风琴的代码

<div id="accordion" class="accordion" style="margin-top:20px;" class="div-shadow col-md-12 col-lg-12 col-sm-12 col-xs-12">
                <template v-for="invGroup in invGroupTotals">
                    <label>{{invGroup.Group}}<span style="float:right; font-size:12px" v-if="invGroup.DiffTotal === 0 && invGroup.DiffAmtTotal === zero" class="text-success"> No Difference </span><span class="text-danger" style="float:right; font-size:12px" v-else>Difference Count {{invGroup.DiffTotal}} , Amount ${{invGroup.DiffAmtTotal}}</span></label>
                <div style="text-align: center; background-color: white; overflow-y:auto;" >
                <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 >{{parseFloat(item.TotalSalesAmount).toFixed(2)}}</td>
                    </tr>
                    </template>
                    <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>

问题是，假设第一次加载时会显示2个手风琴。当改变日期有三个手风琴然后手风琴风格不适用于第三个。我在Updated Hook中调用手风琴，如下所示。

更新：function（）{ $（＆＃34;＃手风琴＆＃34）手风琴（）;}

您能否建议我如何纠正这个问题。提前谢谢。

Answer 1

我通过刷新手风琴使它成功。手风琴实例化后，我们唯一需要注意的事情是刷新。检查其他方法点击here。

动态jquery手风琴在vue.js中不起作用

1 个答案: