CODEWITHSUNDEEP
vue.jsaccordionvue-component
Richi Sharma
Richi Sharma

Reputation: 185

jQuery accordian in Vue js component

I have a child component in Vue js. Where i have a list of object which i am filtering based on InvGroup. I am facing issue when trying to create accordion format. I tried using , tag to surround the accordion content but none of them work. Please suggest a solution.

<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>

I added the jquery in updated method.

updated: function () {
            $("#accordion").accordion();
        }

The problem is the looping tag should not be surrounded by and HTML tag.

Upvotes: 3

Views: 417

Answers (1)

Ramesh Selvakumar
Ramesh Selvakumar

Reputation: 78

Try using template tag instead of div tag

Upvotes: 3

Related Questions