ビューjsコンポーネントのjQueryアコーディオン

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タグで囲まれていないことです。

Answer 1

あなたはフックを取り付けられた代わりに更新しようとしたことがあり、テンプレートタグの代わりに、divタグ