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

【问题标题】：Bootstrap-vue - Display array data as dropdown in vue jsBootstrap-vue - 在 vue js 中将数组数据显示为下拉列表
【发布时间】：2020-07-12 04:06:29
【问题描述】：

我有一个 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”的数据？

【问题讨论】：

loggers 里面的v-for="logger in loggers" 是什么？
@palaѕн loggers 是我上面提到的 json 数据数组。
然后尝试v-for="logger in loggers[0].allAvailableLevel" 并更新文本，如{{ logger }}

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

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

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

【讨论】：

抱歉，我更新了我的问题，现在我有多个元素，因此使用 Loggers[0] 进行硬编码无法解决问题。
您似乎正在循环该数组以生成包含下拉列表的列的表格，请分享该表格代码

【解决方案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>

【讨论】：

但是如果没有硬编码记录器[0]我们怎么能做到呢？