ブートストラップ-VUE - VUE JSのドロップダウンとして表示配列データ

クローナ：

私のようなJSONデータの配列を持っています：

 loggers = [{
        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
        "level": "WARN",
        "logger": "com.test1",
        "status": "success"
    },
{
        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
        "level": "WARN",
        "logger": "com.test2",
        "status": "success"
    }
    ]

私は、テーブルの列の内側に、コードの下に使用して、基本的にロガーアレイなくallAvailableLevelデータを抽出することができないことを横断するためのドロップダウンを使用しています。

 <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Class</th>
            <th>Current Level</th>
            <th>All Available Levels</th>
            <!-- Only display "Action" header if level is changed-->
            <th>
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(logger, index) in loggers" :key="logger">
            <td>{{ index + 1 }}</td>
            <td>{{ logger.logger }}</td>
            <td>{{ logger.level }}</td>
            <td>
              <b-dropdown
                boundary="viewport"
                id="dropdown-dropup"
                size="sm"
                :text="selectedLevelText"
                split
                class="m-2"
              >
                <b-dropdown-item-button
                  v-for="logger in loggers[0].allLevel"
                  :key="logger"
                  @click.prevent="changeLevel(level)"
                  >{{ logger }}</b-dropdown-item-button
                >
              </b-dropdown>
            </td>
            <td v-if="levelChanged">
              <b-button
                size="sm"
                variant="secondary "
                @click.prevent="updateLevel(selectedLevelText)"
                >Update</b-button
              >
            </td>
          </tr>
        </tbody>
      </table>

上記のコードで自分のドロップダウン次のようになります。

私はこのようにそれを表示したいです：

どのように私は「allAvailableLevel」のデータのみを取得するためにVUEテンプレート内の自分のデータを横断していますか？

Boussadjraブライム：

次のようにして、そのネストされた配列を反復処理する必要があります。

 <b-dropdown-item-button
                      v-for="level in logger.allAvailableLevel"
                      :key="level"
                      @click.prevent="changeLevel(level)"
                      >{{ level }}</b-dropdown-item-button
                    >