0
I’m trying to get the data through a data-Binding and mount a table (from bootstrap) using a V-for, but it doesn’t happen as I expected.
Table structure:
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">ID do pedido</th>
<th scope="col">Nome</th>
<th scope="col">Valor do pedido</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col" v-for="ID in DadosSucesso.Id" :key="ID.Id">{{ DadosSucesso.Id }}</td>
</tr>
<tr>
<td scope="col" v-for="NOME in DadosSucesso.Nome" :key="NOME.Nome"> {{ DadosSucesso.Nome }}</td>
</tr>
<tr>
<td scope="col" v-for="VALOR in DadosSucesso.Valor" :key="VALOR.Valor">$ {{ DadosSucesso.Valor }}</td>
</tr>
Objects I try to return:
data() {
return {
DadosSucesso: {
Id: [ 1, 2, 3 ],
Nome: ['João', 'Ramires', 'Lukas'],
Valor: [ 22, 30, 97],
}
}
}
Upshot:
How I’d like you to stay:
Observing: Adapt the solution to your case. I may have changed the name of one variable or another, but the answer works ;)
– Wallace Maxters