Javascript 引导vue-在vue js中将阵列数据显示为下拉列表
我有一个JSON数据数组,如:Javascript 引导vue-在vue js中将阵列数据显示为下拉列表,javascript,vue.js,vuejs2,vue-component,bootstrap-vue,Javascript,Vue.js,Vuejs2,Vue Component,Bootstrap Vue,我有一个JSON数据数组,如: loggers = [{ "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level": "WARN", "logger": "com.test1", "status": "success" }, { "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level"
loggers = [{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test1",
"status": "success"
},
{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test2",
"status": "success"
}
]
我在一个表列中使用下拉菜单,并为此使用下面的代码,基本上遍历Loggers数组,但无法提取所有可用级别的数据
<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>
#
等级
当前水平
所有可用级别
行动
{{index+1}}
{{logger.logger}
{{logger.level}
{{logger}}
更新
使用上述代码,我的下拉列表如下所示:
我想这样显示它:
如何遍历vue模板中的数据以仅获取“allAvailableLevel”的数据
您应该按如下方式迭代该嵌套数组:
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
@click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>
{{level}
执行以下操作:
<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>
{{index+1}}
...
{{logger}}
什么是loggers
内部v-for=“logger in loggers”
?@palaѕѕloggers是我上面提到的json数据数组。然后尝试v-for=“logger in loggers[0].allAvailableLevel”
并更新文本,如{logger}
,但是如果没有硬编码loggers[0],我们怎么做呢?对不起,我更新了我的问题,现在我有不止一个元素,所以使用记录器[0]进行硬编码并不能解决问题。似乎您正在该数组上循环,以便生成一个包含下拉列表的列的表,请共享该表代码