VuejsコンポーネントのjQueryアコーディオン

リチ・シャルマ

Vuejsに子コンポーネントがあります。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タグで囲まないようにすることです。

ラメシュセルバクマール

divタグの代わりにテンプレートタグを使用してみてください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

NativeBase:アコーディオン内のレンダリングコンポーネント

分類Dev

Reactアコーディオンコンポーネントのアクティブな要素を閉じる

分類Dev

vuejsのコンポーネントデータの変更

分類Dev

アコーディオンコンポーネントが閉じるのを防ぐ方法は?

分類Dev

反応アコーディオンコンポーネントの意味的に正しいhtml

分類Dev

コンポーネントデータとvuejsの小道具

分類Dev

Vuejs-アコーディオン

分類Dev

イオンコンポーネント「アラートコントローラ」での双方向データバインディング

分類Dev

JQueryアコーディオンパネル内の2列

分類Dev

VueJsのVモデルと子コンポーネント

分類Dev

VueJSコンポーネントで同期を使用した双方向のpropデータバインディング

分類Dev

VueJS、コンポーネントから別のコンポーネントにデータを渡す

分類Dev

マテリアル-UIアコーディオン(以前のExpansionTable)コンポーネントはインポートされません

分類Dev

Aureliaコンポーネントのバインディング

分類Dev

ディレクティブコンポーネントからのアクセスコントローラーコンポーネント機能

分類Dev

select2コンポーネントのオプションの更新-vuejs

分類Dev

コンポーネント間のオブジェクトの双方向データバインディング

分類Dev

VueJSでのサードパーティコンポーネントの操作

分類Dev

Vueバインディングの親コンポーネントと子コンポーネント

分類Dev

QtQuick / QML でアニメーション化された可変サイズのアコーディオン コンポーネントを作成する方法

分類Dev

別のコンポーネントのVuejsインポートコンポーネント

分類Dev

プロジェクトのビルド中にエラーをスローするAEMのアコーディオンコンポーネント

分類Dev

サードパーティのVueJSコンポーネントをデプロイする方法は?

分類Dev

Vuejs動的データコンポーネント

分類Dev

VueJSのネストされたコンポーネント

分類Dev

Vuejsのネストされた動的コンポーネント

分類Dev

コンポーネントvuejs外のストアにアクセスする

分類Dev

アコーディオンへのレスポンシブコンテンツ

分類Dev

VueJSの別のコンポーネントにデータを渡す

Related 関連記事

  1. 1

    NativeBase:アコーディオン内のレンダリングコンポーネント

  2. 2

    Reactアコーディオンコンポーネントのアクティブな要素を閉じる

  3. 3

    vuejsのコンポーネントデータの変更

  4. 4

    アコーディオンコンポーネントが閉じるのを防ぐ方法は?

  5. 5

    反応アコーディオンコンポーネントの意味的に正しいhtml

  6. 6

    コンポーネントデータとvuejsの小道具

  7. 7

    Vuejs-アコーディオン

  8. 8

    イオンコンポーネント「アラートコントローラ」での双方向データバインディング

  9. 9

    JQueryアコーディオンパネル内の2列

  10. 10

    VueJsのVモデルと子コンポーネント

  11. 11

    VueJSコンポーネントで同期を使用した双方向のpropデータバインディング

  12. 12

    VueJS、コンポーネントから別のコンポーネントにデータを渡す

  13. 13

    マテリアル-UIアコーディオン(以前のExpansionTable)コンポーネントはインポートされません

  14. 14

    Aureliaコンポーネントのバインディング

  15. 15

    ディレクティブコンポーネントからのアクセスコントローラーコンポーネント機能

  16. 16

    select2コンポーネントのオプションの更新-vuejs

  17. 17

    コンポーネント間のオブジェクトの双方向データバインディング

  18. 18

    VueJSでのサードパーティコンポーネントの操作

  19. 19

    Vueバインディングの親コンポーネントと子コンポーネント

  20. 20

    QtQuick / QML でアニメーション化された可変サイズのアコーディオン コンポーネントを作成する方法

  21. 21

    別のコンポーネントのVuejsインポートコンポーネント

  22. 22

    プロジェクトのビルド中にエラーをスローするAEMのアコーディオンコンポーネント

  23. 23

    サードパーティのVueJSコンポーネントをデプロイする方法は?

  24. 24

    Vuejs動的データコンポーネント

  25. 25

    VueJSのネストされたコンポーネント

  26. 26

    Vuejsのネストされた動的コンポーネント

  27. 27

    コンポーネントvuejs外のストアにアクセスする

  28. 28

    アコーディオンへのレスポンシブコンテンツ

  29. 29

    VueJSの別のコンポーネントにデータを渡す

ホットタグ

アーカイブ