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

您应该按如下方式遍历该嵌套数组：&nbsp;<b-dropdown-item-button &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-for="level&nbsp;in&nbsp;logger.allAvailableLevel" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:key="level" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@click.prevent="changeLevel(level)" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>{{&nbsp;level&nbsp;}}</b-dropdown-item-button &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>

Answer 2

做这个：<tr v-for="(logger, index) in loggers" :key="logger">&nbsp; <td>{{ index + 1 }}</td>&nbsp; ...&nbsp; <td>&nbsp; &nbsp; <b-dropdown&nbsp; &nbsp; &nbsp; boundary="viewport"&nbsp; &nbsp; &nbsp; id="dropdown-dropup"&nbsp; &nbsp; &nbsp; size="sm"&nbsp; &nbsp; &nbsp; :text="selectedLevelText"&nbsp; &nbsp; &nbsp; split&nbsp; &nbsp; &nbsp; class="m-2"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <b-dropdown-item-button&nbsp; &nbsp; &nbsp; &nbsp; v-for="level in logger.allAvailableLevel"&nbsp; &nbsp; &nbsp; &nbsp; :key="level"&nbsp; &nbsp; &nbsp; &nbsp; @click.stop="changeLevel(level)"&nbsp; &nbsp; &nbsp; &nbsp; >{{ logger }}</b-dropdown-item-button&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; </b-dropdown>&nbsp; </td></tr>