jQuery accordian в компоненте Vue js

Question

У меня есть дочерний компонент в Vue js. Где у меня есть список объектов, которые я фильтрую на основе 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 и тегом HTML.

Answer 1

Попробуйте использовать тег шаблона вместо тега div