skr:
Tengo una serie de datos JSON como:
loggers = [{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test1",
"status": "success"
},
{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test2",
"status": "success"
}
]
Estoy usando desplegable dentro de una columna de la tabla y para ello mediante el siguiente código, y, básicamente, atravesando gama registradores, pero no es capaz de extraer datos 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>
con el código de mi aspecto desplegables como:
Quiero mostrar de esta manera:
¿Cómo recorro mis datos dentro de la plantilla vue para obtener sólo los datos de "allAvailableLevel"?
Boussadjra Brahim:
Usted debe pasar sobre ese matriz anidada de la siguiente manera:
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
@click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>