Vue JS - How to display a list interspersed between property and value?

Question

I have this list as an object:

let app = new Vue({
 el:'#app',
 data:{
    lista:{
        nome: 'Nome Completo',
        email: '[email protected]',
        cpf: 'xxx.xxx.xxx-xx',
        rg: 'x.xxx.xxx',
        tel: '(xx) x xxxx-xxxx'
    }
 }
});

And I need to display in a td (in a single line) inside the tr and table. Example: Name: Full Name Email: [email protected] CPF: xxx.xxx.xxx-xx RG: x.xxx.xxx Tel: (xx) x xxxx-xxxx

But the closest I got was:

    <table>
            <tr>
                <td v-for="(value, name, index) in lista">
                    {{name}}
                    {{value}}
                </td>
    </table>

Only this way the name (property) is within the same td as the value, but I need the property to occupy its own td and the value also.

Answer 1

<table>
    <tr v-for="(value, name, index) in lista">
        <td class="propriedade">{{name}}</td>
        <td class="valor">{{valor}}</td>
    </tr>
</table>

If the item to be iterated is the line, then this should solve your problem

Answer 2

If you’re not going to show tabular data, theoretically you wouldn’t even need to use a table to show your data side by side.

But if you need it the same way, or someone who gets here needs it, you can use the tag <template> with v-for to render "no parent" tags. See documentation.

The tag <template> will work as a DocumentFragment and serve as a container tag "ghost".

Example:

let app = new Vue({
 el: '#app',
 data: {
    dados: {
        nome: 'Nome Completo',
        email: '[email protected]',
        cpf: 'xxx.xxx.xxx-xx',
        rg: 'x.xxx.xxx',
        tel: '(xx) x xxxx-xxxx'
    }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tbody>
      <tr>
        <template v-for="(value, name, index) in dados">
          <th>{{ name }}</th>
          <td>{{ value }}</td>
        </template>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

I ended up doing this way to be able to separate visually and to be able to make an edition.

<table>
            <tr>
                <td v-for="(value, name, index) in lista">
                    <div class="propriedade">{{name}}</div>
                    <div class="valor">{{value}}</div>
                </td>
    </table>