Vue js組件中的jQuery accordian

我在Vue js中有一個子組件。在哪裏我有一個基於InvGroup過濾的對象列表。嘗試創建手風琴格式時遇到問題。我嘗試使用標籤來圍繞手風琴的內容，但沒有一個能夠工作。請提出解決方案。Vue js組件中的jQuery accordian

<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標記包圍。

來源

2017-02-21 Richi Sharma

您是否嘗試安裝掛鉤，而不是更新？安裝的 – Saurabh

將無法工作，因爲此時該元件將不可用。我沒有更新鉤子的問題。問題在於div標籤。 –

嘗試使用模板標籤，而不是div標籤

來源

2017-02-21 12:59:13

Vue js組件中的jQuery accordian

回答

相關問題