skr:
Eu tenho uma matriz de dados 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"
}
]
Eu estou usando suspenso dentro de uma coluna da tabela e para isso usando o código abaixo, e, basicamente, atravessando variedade Madeireiros, mas não é capaz de extrair dados 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>
com código acima minha aparência suspensas como:
Quero apresentá-lo como este:
Como faço para percorrer os meus dados dentro do modelo vue de obter apenas os dados de "allAvailableLevel"?
Boussadjra Brahim:
Você deve iterar sobre essa matriz aninhada como segue:
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
@click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>