ホーム>source

Vuejsのデータオブジェクト内のネストされたオブジェクトを反復してメニューを作成することを探しています。

これが私が考えたループです:

<前>ウィズウィズ

ネストされたサブメニューが1レベルあるシンプルなメニューになります。

<前>ウィズウィズ

これはコンポーネントなので、データはfunction(){}です。

簡単な問題であることはわかっていますが、メニュー(原子、分子...)をulとして、サブメニュー(各配列の文字列)をliとして、きれいなリストを取得できません。 現在、[]と{}を使用して、画面上にすべての配列を取得しています。

また、ChromeコンソールでVuejsを実行すると、データの各レイヤーの間に「0」オブジェクトが追加されるのはなぜですか。

ご協力いただきありがとうございます。 JSfiddleを作成しようとしましたが、まったく機能しませんでした。

<ul v-for="category in categories" :key="category"> {{ category }} <li v-for="subCategory in category" :key="subCategory"> <router-link to="/"> {{ subCategory }} </router-link> </li> </ul>
あなたの答え
  • 解決した方法 # 1

    あなたができることは、 categories  オブジェクトになる:

    ウィズウィズ
    

    そして categories: { Atoms: ["Buttons", "Icons"], Molecules: [], Organisms: [], Templates: [], Utilities: ["Grid"] } を使用します 。これにより、オブジェクトが2次元配列に変換され、ループして名前と値の両方にアクセスできます。

    Object.entries

    ウィズウィズ
    
    ウィズウィズ
    

    ウィズウィズ  ここでは、配列分解を使用して、オブジェクトを直接変数に分解しています。

    Object.entries(categories)

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ RetifiedとしてマークされたタイプのみをKotlinジェネリック関数に渡す