Organize data from a Binding date into a table

Question

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:

Answer 1

From what I’m seeing, you’re using an object, whose each value is an array, which in turn has the same size in each property.

The solution I would give for this would be to count the amount of values existing in one of the items and, in a loop with v-for, access these values by the index.

In the VUE you can use numbers on v-for to create a number of iterations.

For example:

v-for="i in 10"

The above example will create an iteration of 1to 10. In the case of version 2.0 >=, the iteration will always start with 1, and not by 0.

How do we iterate on your object that you have arrays and we need to start from 0, we could use the "key value" pair to get the iteration from the 0.

Thus:

v-for="(valor, chave) in 10"

In that case, valor would go from 1 at the 10, and chave of 0 at the 9.

With this information, we can iterate on your object. We need to capture the length (the size of the array) of one of the items of your object to use in the iteration. The idea here is to get the value of each field by the array.

In the example below, I took length of array of property Id.

Behold:

var app = new Vue({
  el: '#app', 
  data: {
    dados: {
      Id: [ 1, 2, 3 ],
      Nome: ['João', 'Ramires', 'Lukas'],
      Valor: [ 22, 30, 97],
    }
  }
})


console.log(app)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>

    <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 v-for="(_, k) in dados.Id.length">
                <td>{{ dados.Id[k] }}</td>
                <td>{{ dados.Nome[k] }}</td>
                <td>{{ dados.Valor[k] }}</td>
            </tr>

        </tbody>
    </table>


</div>

Answer 2

Hello, you’re going through the same For obj.

Try it like this:

<tr>
   <td scope="col" v-for="ID in DadosSucesso.Id" :key="ID.Id">{{ ID }}</td>
  </tr>
  <tr>
   <td scope="col" v-for="NOME in DadosSucesso.Nome" :key="NOME.Nome"> {{ NOME }}</td>
  </tr>
  <tr>
   <td scope="col" v-for="VALOR in DadosSucesso.Valor" :key="VALOR.Valor">$ {{ VALOR }}</td>
  </tr>