동적 jquery 아코디언이 vue.js에서 작동하지 않습니다.

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에서 아코디언이 표시된다고 가정합니다. 3 개의 아코디언이있는 날짜를 변경하면 아코디언 스타일이 세 번째 아코디언에 적용되지 않습니다. 아래와 같이 아코디언을 Updated Hook에서 호출합니다.

업데이트 : 함수() {. $ ("# 아코디언") 아코디언();}

당신은 내가 문제를 해결하는 방법을 제안 해주십시오 없습니다. 미리 감사드립니다.

Answer 1

아코디언을 상쾌하게하여 제작하고 있습니다. 우리가 돌볼 필요가있는 것은 아코디언을 인스턴스화 한 후 새로 고치는 것입니다. 다른 방법을 확인하려면 here을 클릭하십시오.