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

回答

相关问题