Bootstrap-vue - 在 vue js 中将数组数据显示为下拉列表

Question

我有一组 JSON 数据，例如： loggers = [{        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],        "level": "WARN",        "logger": "com.test1",        "status": "success"    },{        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],        "level": "WARN",        "logger": "com.test2",        "status": "success"    }    ]我在表列中使用下拉菜单，并为此使用下面的代码，并且基本上遍历 Loggers 数组但无法提取 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>使用上面的代码，我的下拉列表如下所示：我想像这样显示它：如何在vue模板中遍历我的数据只获取“allAvailableLevel”的数据？

Answer 1

您应该按如下方式遍历该嵌套数组：

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

Answer 2

做这个：

<tr v-for="(logger, index) in loggers" :key="logger">

  <td>{{ index + 1 }}</td>

  ...

  <td>

    <b-dropdown

      boundary="viewport"

      id="dropdown-dropup"

      size="sm"

      :text="selectedLevelText"

      split

      class="m-2"

    >

      <b-dropdown-item-button

        v-for="level in logger.allAvailableLevel"

        :key="level"

        @click.stop="changeLevel(level)"

        >{{ logger }}</b-dropdown-item-button

      >

    </b-dropdown>

  </td>

</tr>